/* =========================================================
   MOGIO — Studio di design · Giorgio Frezza
   Better build of mogio.xyz — multilingual, animated
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#0a0a0a; --ink-2:#101010; --ink-soft:#171717;
  --paper:#efe9dd; --white:#faf8f3;
  --accent:#ff4d00; --accent-2:#ff7a3c;
  --line:rgba(250,248,243,.13);
  --line-dark:rgba(10,10,10,.14);
  --muted:rgba(250,248,243,.55);
  --muted-dark:rgba(10,10,10,.55);
  --maxw:1320px; --pad:clamp(20px,5vw,80px);
  --f-display:"Syne","Arial Black",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ font-family:var(--f-body); background:var(--ink); color:var(--white); line-height:1.5; overflow-x:hidden; cursor:none; }
@media (pointer:coarse){ body{ cursor:auto; } }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:inherit; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(84px,11vh,160px); }
.eyebrow{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7em; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--accent); display:inline-block; }
.h-lead{ font-family:var(--f-display); font-weight:800; line-height:.99; font-size:clamp(2.2rem,6vw,4.8rem); letter-spacing:-.02em; }
.lede{ font-size:clamp(1.02rem,1.6vw,1.32rem); color:var(--muted); max-width:42ch; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; padding:15px 26px; border-radius:100px; border:1px solid var(--line); transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s; }
.btn--solid{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px); }
.btn--ghost:hover{ background:rgba(250,248,243,.06); border-color:var(--white); transform:translateY(-2px); }
.btn--full{ width:100%; justify-content:center; }

/* ---------- Grain ---------- */
.grain{ position:fixed; inset:-200%; z-index:9000; pointer-events:none; width:500%; height:500%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.04; mix-blend-mode:overlay; animation:grain 7s steps(8) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-15%,5%)} 40%{transform:translate(-5%,25%)} 60%{transform:translate(15%,0)} 80%{transform:translate(3%,35%)} 100%{transform:translate(0,0)} }

/* ---------- Cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:9px; height:9px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), background .3s, opacity .3s; mix-blend-mode:difference; }
.cursor.is-hover{ width:54px; height:54px; background:var(--white); }
.cursor.is-hide{ opacity:0; }
@media (pointer:coarse){ .cursor{ display:none; } }

.progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:8000; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:9500; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; transition:opacity .8s var(--ease), visibility .8s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader__mark{ width:74px; opacity:0; transform:translateY(14px) scale(.9); animation:loadMark .9s var(--ease) forwards; }
.loader__bar{ width:min(220px,52vw); height:2px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--accent); }
.loader__pct{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted); }
@keyframes loadMark{ to{ opacity:1; transform:none; } }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:7000; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px var(--pad); transition:transform .5s var(--ease), background .4s, backdrop-filter .4s, padding .4s; }
.nav.hidden{ transform:translateY(-115%); }
.nav.solid{ background:rgba(10,10,10,.7); backdrop-filter:blur(14px); padding-block:11px; border-bottom:1px solid var(--line); }
.nav__brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:800; font-size:1.05rem; }
.nav__brand img{ width:26px; }
.nav__links{ display:flex; gap:28px; align-items:center; }
.nav__links a{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); position:relative; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--white); transition:width .4s var(--ease); }
.nav__links a:hover{ color:var(--white); } .nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:16px; }
.nav__cta{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); padding:10px 18px; border-radius:100px; color:var(--white); transition:background .35s var(--ease), color .35s, border-color .35s; }
.nav__cta:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* Language switcher */
.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:var(--white); border:1px solid var(--line); padding:9px 12px; border-radius:100px; transition:border-color .3s, background .3s; }
.lang__btn:hover{ border-color:var(--white); }
.lang__btn svg{ transition:transform .3s var(--ease); }
.lang.open .lang__btn svg{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; background:rgba(16,16,16,.94); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:12px; padding:6px; min-width:150px; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.lang.open .lang__menu{ opacity:1; visibility:visible; transform:none; }
.lang__menu button{ text-align:left; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; color:var(--muted); padding:10px 12px; border-radius:8px; transition:background .25s, color .25s; }
.lang__menu button:hover{ background:rgba(250,248,243,.06); color:var(--white); }
.lang__menu button.active{ color:var(--accent); }
@media (max-width:920px){ .nav__links{ display:none; } .nav__cta{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-block:96px 60px; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__grid{ position:absolute; inset:-2px; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 82% 72% at 50% 42%,#000 28%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 82% 72% at 50% 42%,#000 28%,transparent 78%); animation:gridDrift 30s linear infinite; }
@keyframes gridDrift{ to{ background-position:64px 64px,64px 64px; } }
.hero__glow{ position:absolute; width:60vw; height:60vw; left:50%; top:40%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,77,0,.2),transparent 62%); filter:blur(20px); animation:pulse 8s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:translate(-50%,-50%) scale(1.12); opacity:.8; } }

.hero__inner{ position:relative; z-index:2; }
.hero__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:clamp(14px,3.4vh,34px); }
.hero__top .eyebrow{ opacity:0; }

.wordmark{ display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:center; gap:.01em; line-height:.8; white-space:nowrap; }
.wordmark__m{ flex:none; height:clamp(56px,15vw,210px); width:auto; transform:translateY(2%); will-change:transform; filter:drop-shadow(0 18px 50px rgba(0,0,0,.6)); }
.wordmark__txt{ flex:none; white-space:nowrap; font-family:var(--f-display); font-weight:800; font-size:clamp(60px,16.5vw,238px); line-height:.78; letter-spacing:-.04em; margin-left:-.01em; }
.wordmark__txt .ch{ display:inline-block; transform:translateY(115%); }

.hero__name{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:14px; margin-top:clamp(18px,3.4vh,36px); text-align:center; }
.hero__name h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.25rem,3.2vw,2.1rem); }
.hero__name .sep{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.hero__name p{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em; font-size:clamp(.64rem,1.05vw,.8rem); color:var(--muted); }

.hero__tag{ text-align:center; max-width:56ch; margin:clamp(18px,3.2vh,30px) auto 0; color:var(--muted); font-size:clamp(1rem,1.45vw,1.2rem); }
.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(22px,3.6vh,34px); }
.hero__chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.hchip{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:7px 14px; }

.hero__foot{ position:absolute; left:0; right:0; bottom:24px; z-index:2; display:flex; justify-content:space-between; align-items:center; padding-inline:var(--pad); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.scrollcue{ display:flex; align-items:center; gap:10px; }
.scrollcue .line{ position:relative; width:46px; height:1px; background:var(--line); overflow:hidden; }
.scrollcue .line::after{ content:""; position:absolute; inset:0; width:40%; background:var(--accent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(260%)} }
@media (max-width:600px){ .hero__foot .loc,.hero__foot>span:last-child{ display:none; } }

/* ---------- Marquee ---------- */
.marquee{ position:relative; padding-block:24px; border-block:1px solid var(--line); overflow:hidden; background:var(--ink-2); }
.marquee__track{ display:flex; width:max-content; animation:scrollX 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,2.8vw,2.2rem); letter-spacing:-.01em; padding-inline:.5em; display:flex; align-items:center; gap:.6em; white-space:nowrap; }
.marquee__track span::after{ content:"✦"; color:var(--accent); font-size:.55em; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* =========================================================
   PROFILO
   ========================================================= */
.profilo{ background:var(--ink); }
.profilo__grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(34px,6vw,84px); align-items:center; }
.profilo__photo{ position:relative; }
.profilo__photo .frame{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:73/92; background:var(--ink-soft); border:1px solid var(--line); }
.profilo__photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transform:scale(1.06); transition:filter .6s var(--ease), transform 1.2s var(--ease); }
.profilo__photo:hover img{ filter:grayscale(0); transform:scale(1.12); }
.profilo__photo .badge{ position:absolute; bottom:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(10,10,10,.55); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:8px; padding:9px 12px; }
.profilo__photo .badge .dot{ width:7px; height:7px; border-radius:50%; background:#27d07a; box-shadow:0 0 0 4px rgba(39,208,122,.18); display:inline-block; vertical-align:middle; margin-right:6px; }
.profilo__specs{ display:flex; gap:10px; margin-top:14px; }
.profilo__specs .spec{ flex:1; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.profilo__specs .k{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.profilo__specs .v{ display:block; font-family:var(--f-mono); font-size:.86rem; margin-top:5px; color:var(--white); }

.profilo__txt .profilo__tag{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,1.9vw,1.5rem); color:var(--white); margin-top:22px; line-height:1.35; }
.profilo__txt p{ margin-top:18px; font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.6; }
.profilo__txt p.muted{ color:var(--muted); }
.profilo__kw{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.profilo__kw .kw{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--white); border:1px solid var(--line); border-radius:100px; padding:8px 14px; }
.profilo__edu{ display:flex; align-items:baseline; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:.92rem; color:var(--muted); flex-wrap:wrap; }
.profilo__edu .k{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
@media (max-width:880px){ .profilo__grid{ grid-template-columns:1fr; } .profilo__photo{ max-width:420px; } }

/* =========================================================
   SKILL
   ========================================================= */
.skill{ background:var(--paper); color:var(--ink); }
.skill .eyebrow{ color:var(--ink); } .skill .eyebrow::before{ background:var(--ink); }
.skill__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:50px; }
.skill__head h2{ color:var(--ink); }
.skill__kicker{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-dark); }
.skill__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:16px; overflow:hidden; }
.skillcard{ background:var(--paper); padding:34px 30px 40px; min-height:200px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:color .5s var(--ease); }
.skillcard__no{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--muted-dark); }
.skillcard h3{ font-family:var(--f-display); font-weight:700; font-size:1.45rem; margin-top:auto; letter-spacing:-.01em; transition:color .5s; }
.skillcard p{ color:var(--muted-dark); font-size:.94rem; margin-top:10px; transition:color .5s; }
.skillcard::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .55s var(--ease); z-index:0; }
.skillcard>*{ position:relative; z-index:1; }
.skillcard:hover::before{ transform:translateY(0); }
.skillcard:hover{ color:var(--white); }
.skillcard:hover h3{ color:var(--white); }
.skillcard:hover p{ color:var(--muted); }
.skillcard:hover .skillcard__no{ color:var(--accent); }
@media (max-width:900px){ .skill__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .skill__grid{ grid-template-columns:1fr; } }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio{ background:var(--ink); }
.portfolio__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:52px; }
.portfolio__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); }
.work{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--ink-2); transition:border-color .45s var(--ease), transform .5s var(--ease); }
.work:hover{ border-color:rgba(255,77,0,.45); transform:translateY(-4px); }
.work__viz{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0c0c; display:flex; }
.work__viz::before, .work__viz::after{ content:""; position:absolute; inset:0; transition:transform .9s var(--ease), opacity .6s; }
.work:hover .work__viz::before{ transform:scale(1.08); }
.work__no{ position:absolute; left:18px; bottom:14px; z-index:2; font-family:var(--f-display); font-weight:800; font-size:1.4rem; color:var(--white); mix-blend-mode:difference; }
.work__note{ position:absolute; right:16px; top:14px; z-index:2; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--accent); padding:5px 10px; border-radius:100px; }
/* generative visuals */
.work__viz[data-viz="1"]{ background:radial-gradient(circle at 50% 50%,#1c1c1c,#0b0b0b); }
.work__viz[data-viz="1"]::before{ background:
  repeating-radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(255,77,0,.16) 16px 17px),
  linear-gradient(rgba(250,248,243,.05) 1px,transparent 1px) 0 0/100% 28px; }
.work__viz[data-viz="2"]{ background:linear-gradient(135deg,#181818,#0b0b0b); }
.work__viz[data-viz="2"]::before{ background:repeating-linear-gradient(45deg, rgba(250,248,243,.06) 0 2px, transparent 2px 12px); }
.work__viz[data-viz="2"]::after{ background:radial-gradient(60% 80% at 70% 50%, rgba(255,77,0,.22), transparent 60%); }
.work__viz[data-viz="3"]{ background:#0c0c0c; }
.work__viz[data-viz="3"]::before{ background:radial-gradient(circle at center, rgba(250,248,243,.5) 1.3px, transparent 1.4px) 0 0/26px 26px; opacity:.5;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 72%); }
.work__viz[data-viz="3"]::after{ background:radial-gradient(40% 60% at 50% 50%, rgba(255,77,0,.18), transparent 65%); }
.work__viz[data-viz="4"]{ background:linear-gradient(#141414,#0b0b0b); }
.work__viz[data-viz="4"]::before{ background:repeating-linear-gradient(90deg, rgba(250,248,243,.07) 0 2px, transparent 2px 18px),
  repeating-linear-gradient(90deg, rgba(255,77,0,.12) 0 1px, transparent 1px 54px); }
.work__body{ padding:24px 26px 30px; }
.work__meta{ display:flex; justify-content:space-between; align-items:center; }
.work__meta .cat{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.work__meta .open{ font-size:1.1rem; color:var(--muted); transition:transform .4s var(--ease), color .4s; }
.work:hover .work__meta .open{ transform:translate(3px,-3px); color:var(--white); }
.work__body h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.01em; margin-top:14px; }
.work__body p{ color:var(--muted); font-size:.96rem; margin-top:10px; line-height:1.55; }
@media (max-width:740px){ .portfolio__grid{ grid-template-columns:1fr; } }

/* =========================================================
   PROCESS
   ========================================================= */
.process{ background:var(--paper); color:var(--ink); }
.process .eyebrow{ color:var(--ink); } .process .eyebrow::before{ background:var(--ink); }
.process__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:48px; }
.process__head h2{ color:var(--ink); } .process__head .lede{ color:var(--muted-dark); }
.process__list{ border-top:1px solid var(--line-dark); }
.step{ display:grid; grid-template-columns:90px 1fr 2fr; gap:30px; align-items:baseline; padding:30px 0; border-bottom:1px solid var(--line-dark); position:relative; transition:padding-left .4s var(--ease); }
.step::before{ content:""; position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,rgba(255,77,0,.08),transparent); transition:width .5s var(--ease); z-index:0; }
.step:hover{ padding-left:16px; }
.step:hover::before{ width:100%; }
.step>*{ position:relative; z-index:1; }
.step__no{ font-family:var(--f-mono); font-size:.84rem; color:var(--accent); }
.step h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--ink); letter-spacing:-.01em; }
.step p{ color:var(--muted-dark); font-size:1rem; line-height:1.55; }
@media (max-width:760px){ .step{ grid-template-columns:60px 1fr; } .step p{ grid-column:1/-1; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--ink); position:relative; overflow:hidden; }
.contact__glow{ position:absolute; width:70vw; height:70vw; left:-10%; bottom:-40%; background:radial-gradient(circle,rgba(255,77,0,.14),transparent 60%); filter:blur(20px); }
.contact__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-.025em; line-height:.98; font-size:clamp(2.2rem,5.5vw,4.2rem); }
.contact__left p{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.18rem); max-width:42ch; }
.contact__info{ margin-top:42px; border-top:1px solid var(--line); }
.contact__info .info{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease); }
.contact__info a.info:hover{ padding-left:10px; }
.contact__info .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.contact__info .v{ font-family:var(--f-mono); font-size:.95rem; color:var(--white); }
.contact__info a.info:hover .v{ color:var(--accent); }

.contact__form{ display:grid; gap:16px; background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3vw,34px); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{ font-family:var(--f-body); font-size:1rem; color:var(--white); background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:13px 15px; transition:border-color .3s; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field select option{ background:var(--ink-2); color:var(--white); }
@media (max-width:880px){ .contact__grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-block:38px; }
.footer__row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.footer__brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800; font-size:1.4rem; }
.footer__brand img{ width:30px; }
.footer__row .small{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.footer__top{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s; }
.footer__top:hover{ color:var(--white); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.07s; } .reveal-d2{ transition-delay:.14s; } .reveal-d3{ transition-delay:.21s; }
.reveal-d4{ transition-delay:.28s; } .reveal-d5{ transition-delay:.35s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  .wordmark__txt .ch{ transform:none; }
  body{ cursor:auto; } .cursor{ display:none; }
}