:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --panel:rgba(255,255,255,.035);
  --glass:rgba(255,255,255,.05);
  --panel-brd:rgba(255,255,255,.09);
  --ink:#f4f2ef;
  --ink-dim:#9a9793;
  --ink-faint:#5f5c58;
  --accent:#e4442a;
  --accent-soft:rgba(228,68,42,.16);
  --r:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--accent)}

/* uniform site background glow */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 42% at 78% 12%,rgba(228,68,42,.09),transparent 60%);}
/* slow drifting fog / smoke — visible but calm */
body::after{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.9;
  background:
    radial-gradient(38% 48% at 18% 28%,rgba(255,255,255,.07),transparent 62%),
    radial-gradient(42% 52% at 82% 72%,rgba(228,68,42,.10),transparent 62%),
    radial-gradient(32% 42% at 62% 18%,rgba(255,255,255,.05),transparent 62%),
    radial-gradient(46% 40% at 40% 88%,rgba(228,68,42,.06),transparent 60%);
  filter:blur(40px);animation:fog 30s ease-in-out infinite alternate}
@keyframes fog{0%{transform:translate3d(-4%,-3%,0) scale(1)}
  50%{transform:translate3d(3%,4%,0) scale(1.12)}
  100%{transform:translate3d(5%,-4%,0) scale(1.05)}}

/* subtle idle float */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float{animation:float var(--fd,7s) ease-in-out infinite;animation-delay:var(--fdelay,0s)}

/* cursor spotlight */
.spotlight{position:fixed;top:0;left:0;width:600px;height:600px;border-radius:50%;z-index:0;
  pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(228,68,42,.07),transparent 62%);
  will-change:left,top}
body:hover .spotlight{opacity:1}

/* magnetic elements */
[data-magnet]{transition:transform .35s var(--ease)}

/* grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* shared bits */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.eyebrow--right{flex-direction:row-reverse}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px 2px var(--accent);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;font-weight:600;letter-spacing:-.02em}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:18px clamp(16px,4vw,44px)}
.nav__logo{font-weight:700;font-size:.95rem;line-height:1.1;letter-spacing:.01em;color:#fff}
.nav__links{display:flex;gap:clamp(6px,1vw,14px);font-size:.82rem;font-weight:500;
  letter-spacing:.02em;padding:7px 10px;border-radius:999px;background:var(--glass);
  border:1px solid var(--panel-brd);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav__links a{padding:8px 16px;border-radius:999px;color:var(--ink-dim);
  transition:color .3s,background .3s}
.nav__links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* HERO */
.hero{height:300vh;position:relative}
.hero__sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

.hero__portrait{position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;will-change:transform}
.hero__portrait video,.hero__portrait img{
  height:100%;width:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  -webkit-mask-image:radial-gradient(62% 72% at 50% 45%,#000 55%,transparent 100%);
  mask-image:radial-gradient(62% 72% at 50% 45%,#000 55%,transparent 100%);
}
/* dark blend overlay so light bg melts into page */
.hero__sticky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 75% at 50% 45%,transparent 40%,var(--bg) 92%),
             linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 55%,var(--bg) 90%)}
/* black shelf beneath the hero: the section paints solid bg at its top and
   fades to transparent lower, so the (non-pure-black) fog emerges smoothly
   instead of showing a hard seam as the pinned hero lifts away. */
#pristup{background:linear-gradient(180deg,var(--bg) 0,var(--bg) 6vh,transparent 48vh)}

.hero__panel{position:absolute;inset:0;z-index:3;will-change:opacity}
.hero__panel--b{opacity:0}
.hero__panel .ha,.hero__panel .hb{position:absolute;margin:0}

.hero__title{font-size:clamp(2.3rem,5.4vw,4.9rem);line-height:.94;font-weight:800;
  letter-spacing:-.04em;text-transform:uppercase;mix-blend-mode:difference}
.hero__title--b{font-size:clamp(2.6rem,6.5vw,5.6rem);text-transform:none}
.hero__lead{color:var(--ink-dim);font-size:clamp(.95rem,1.15vw,1.1rem);max-width:32ch}
.hero__scrollhint{display:inline-flex;align-items:center;gap:16px;font-size:.72rem;
  letter-spacing:.25em;text-transform:uppercase;color:var(--ink-dim)}
.scrollbar{position:relative;display:inline-block;width:92px;height:1px;background:rgba(255,255,255,.18)}
.scrollbar__fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* hero entrance — pieces fade/rise in, scattered timing */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ha{opacity:0;animation:heroIn .9s var(--ease) forwards;animation-delay:var(--hd,0s)}
.ha--eyebrow{--hd:.15s}
.ha--meta{--hd:.5s}
.ha--title{--hd:.32s}
.ha--lead{--hd:.72s}
.ha--hint{--hd:.95s}

/* STATE A — oversized title bleeds across centre; support info in corners */
.ha--eyebrow{top:16%;left:clamp(20px,6vw,90px)}
.ha--title{top:26%;left:clamp(20px,5vw,70px);z-index:4}
.ha--lead{bottom:20%;right:clamp(20px,6vw,90px);text-align:right;z-index:4}
.ha--meta{top:19%;right:clamp(20px,6vw,90px);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}
.ha--hint{position:absolute;bottom:8%;left:clamp(20px,6vw,90px);z-index:4}

/* STATE B — info fills the emptied left side, staggered */
.hb--eyebrow{top:20%;left:clamp(20px,6vw,90px)}
.hb--title{top:29%;left:clamp(20px,6vw,90px);z-index:4}
.hb--lead{bottom:20%;left:clamp(60px,12vw,190px);max-width:32ch;color:var(--ink-dim)}
.hb--title em{color:var(--accent)}

/* SECTIONS */
.section{padding:clamp(80px,12vh,160px) clamp(20px,6vw,90px);position:relative}
.section__head{max-width:900px;margin:0 auto clamp(48px,7vw,90px)}
.section__head .eyebrow{margin-bottom:1.4em}
.section__sub{color:var(--ink-dim);margin-top:1.4em;max-width:52ch;font-size:1.05rem}

/* APPROACH */
.approach{max-width:1100px;margin:0 auto}
.approach__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);
  align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.approach__head .eyebrow{margin-bottom:1.4em}
.approach__lead{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.45;color:var(--ink-dim);
  font-weight:400;max-width:38ch;padding-bottom:.3em}

.approach__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;background:var(--glass);border:1px solid var(--panel-brd);border-radius:var(--r);
  padding:32px 28px 36px;overflow:hidden;transition:border-color .5s;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(228,68,42,.14),transparent 60%)}
.card:hover{border-color:var(--accent-soft)}
.card:hover::after{opacity:1}
.card__num{color:var(--accent);font-weight:700;font-size:.85rem;letter-spacing:.1em;position:relative}
.card h3{font-size:1.25rem;font-weight:600;margin:1.6em 0 .5em;letter-spacing:-.01em;position:relative}
.card p{color:var(--ink-dim);font-size:.95rem;position:relative}
/* tilted "falling" card */
@keyframes floatTilt{0%,100%{transform:translateY(0) rotate(3.5deg)}50%{transform:translateY(-9px) rotate(3.5deg)}}
.card--tilt{animation-name:floatTilt}

/* DIRECTIONS */
.dir-head{max-width:1100px;margin:0 auto clamp(32px,5vw,64px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:end}
.dir-head .eyebrow{margin-bottom:1.2em}
.dir-head__sub{color:var(--ink-dim);font-size:clamp(1rem,1.3vw,1.15rem);max-width:36ch;padding-bottom:.3em}

.directions{max-width:1100px;margin:0 auto;list-style:none;
  display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:112px;gap:14px}
.dir{position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;
  padding:26px;border-radius:var(--r);background:var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--panel-brd);transition:transform .5s var(--ease),border-color .5s}
/* scattered across a 5-col field — cards sit off-grid, empty cells breathe between them */
/* variant 2 — diagonal cascade with deliberate holes */
.dir--a{grid-column:1/3;grid-row:1/3}
.dir--b{grid-column:4/6;grid-row:1/3}
.dir--c{grid-column:2/4;grid-row:3/5}
.dir--d{grid-column:4/6;grid-row:4/6;transform:rotate(2.5deg);animation-name:floatD}
.dir--e{grid-column:1/3;grid-row:5/7}
@keyframes floatD{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-8px)}}
.dir--d:hover{transform:rotate(2.5deg) translateY(-6px)}
.dir::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(228,68,42,.16),transparent 60%)}
.dir:hover{transform:translateY(-6px);border-color:var(--accent-soft)}
.dir:hover::after{opacity:1}
.dir__idx{position:absolute;top:24px;left:26px;font-size:1.7rem;line-height:1;font-weight:700;
  color:var(--accent);opacity:.42;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dir:hover .dir__idx{opacity:.75;transform:scale(1.06)}
.dir__name{font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.01em;position:relative}
.dir__desc{color:var(--ink-dim);font-size:.95rem;position:relative}
.dir__arrow{position:absolute;top:26px;right:28px;color:var(--accent);font-size:1.25rem;opacity:0;
  transform:translate(-8px,8px);transition:opacity .4s,transform .45s var(--ease)}
.dir:hover .dir__arrow{opacity:1;transform:none}
@media(max-width:600px){
  .directions{grid-template-columns:1fr;grid-auto-rows:auto}
  .dir,.dir-ghost{grid-column:1!important;grid-row:auto!important;min-height:150px}
  .dir--d,.dir--d[data-reveal]{transform:none}
}

/* ABOUT */
.about{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,72px);align-items:center}
.about__media{border-radius:var(--r);overflow:hidden;border:1px solid var(--panel-brd);
  transition:transform .6s var(--ease),border-color .6s;transform-origin:center;will-change:transform}
.about__media img{width:100%;filter:grayscale(1) contrast(1.05);
  transition:transform .8s var(--ease),filter .6s;will-change:transform}
.about__media[data-reveal]:hover{transform:rotate(-2.5deg);border-color:var(--accent-soft)}
.about__media:hover img{transform:scale(1.07);filter:grayscale(1) contrast(1.12)}
.about__text .eyebrow{margin-bottom:1.4em}
.about__text .h2{margin-bottom:.7em}
.about__text p{color:var(--ink-dim);margin-bottom:1.2em;max-width:46ch}
.about__meta{display:flex;gap:40px;margin-top:2.2em;flex-wrap:wrap}
.about__meta div{display:flex;flex-direction:column;gap:.3em}
.about__k{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.about__v{font-weight:600}

/* CONTACT */
.contact{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);align-items:start}
.contact__intro .eyebrow{margin-bottom:1.4em}
.contact__intro .h2{margin-bottom:.6em}
.contact__intro p{color:var(--ink-dim);max-width:38ch;margin-bottom:2em}
.contact__mail{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;border-bottom:1px solid var(--accent);
  padding-bottom:4px;transition:color .3s}
.contact__mail:hover{color:var(--accent)}

/* FORM */
.form{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r);
  padding:clamp(24px,3vw,40px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:flex;flex-direction:column;gap:.6em;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.form input,.form textarea{background:rgba(0,0,0,.25);border:1px solid var(--panel-brd);
  border-radius:12px;padding:14px 16px;color:var(--ink);font-family:inherit;font-size:1rem;
  font-weight:400;letter-spacing:normal;text-transform:none;transition:border-color .3s,background .3s}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-faint)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.4)}
.form textarea{resize:vertical}

.file{cursor:pointer}
.file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file__ui{display:flex;align-items:center;gap:14px;border:1px dashed var(--panel-brd);
  border-radius:12px;padding:16px;transition:border-color .3s,background .3s;
  text-transform:none;letter-spacing:normal;font-weight:400}
.file:hover .file__ui{border-color:var(--accent);background:rgba(228,68,42,.05)}
.file__icon{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-size:1.3rem;font-weight:600}
.file__txt{color:var(--ink-dim);font-size:.95rem}
.file__txt em{color:var(--ink-faint);font-size:.85em}

.btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;
  background:var(--accent);color:#fff;border:none;border-radius:12px;padding:15px 26px;
  font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 0 0 rgba(228,68,42,0)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px -8px var(--accent)}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.form__note{color:var(--ink);font-size:.95rem;text-transform:none;letter-spacing:normal;font-weight:400}
.form__note em{color:var(--ink-faint)}

/* FOOTER */
.footer{display:flex;justify-content:space-between;align-items:center;
  padding:32px clamp(20px,6vw,90px);border-top:1px solid var(--panel-brd);
  color:var(--ink-faint);font-size:.82rem;letter-spacing:.05em}
.footer .dot{display:inline-block;margin-left:.5em;vertical-align:middle}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(38px);filter:blur(8px);
  transition:opacity .85s var(--ease) var(--rd,0s),transform .85s var(--ease) var(--rd,0s),filter .85s var(--ease) var(--rd,0s)}
[data-reveal].in{opacity:1;transform:none;filter:none}
/* cards keep their float animation → don't let reveal transform fight it */
.card[data-reveal],.dir[data-reveal],.about__media[data-reveal]{transform:none}
.dir--d[data-reveal]{transform:rotate(2.5deg)}

/* RESPONSIVE */
@media(max-width:600px){
  .nav__links{gap:16px;font-size:.75rem}
  .approach__grid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about__media{max-width:none}          /* full width, equal side padding */
  .contact{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  /* hero mobile positions */
  .ha--meta{top:13%}
  .ha--eyebrow{top:20%}                 /* below BRNO so they don't touch */
  .ha--title{top:53%}
  .ha--lead{bottom:19%}                 /* sits between title and SCROLL */
  .hb--eyebrow{top:15%}
  .hb--title{top:42%}
  .hb--lead{bottom:19%;left:clamp(20px,6vw,90px)}  /* not pinned hard-left */
}
@media(max-width:560px){
  .nav__logo{font-size:.85rem}
  .nav__links a:not(:last-child){display:none}
}