html{ scroll-behavior:smooth; }
:root{
  --bg:#141110;
  --surface:#1D1815;
  --surface-2:#221C18;
  --fg:#F4EEE4;
  --fg-muted:#B4A99A;
  --line:#332C26;
  --accent:#F1541D;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Hanken Grotesk', system-ui, sans-serif; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--bg); }
.eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:22px 48px; max-width:1180px; margin:0 auto; }
.wordmark{ font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em; }
.wordmark span{ color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:14px; color:var(--fg-muted); transition:color .15s ease; }
.nav-links a:hover{ color:var(--fg); }
.nav-right{ display:flex; align-items:center; gap:20px; }
.nav-cta{ padding:10px 20px; border:1px solid var(--accent); color:var(--accent); font-size:13px; letter-spacing:.02em; transition:background .15s ease, color .15s ease; }
.nav-cta:hover{ background:var(--accent); color:#FFFFFF; }
.hamburger{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:38px; height:38px; background:transparent; border:1px solid var(--line); padding:0; cursor:pointer; flex-shrink:0; }
.hamburger .bar{ width:16px; height:2px; background:var(--fg); transition:transform .2s ease, opacity .2s ease; }
.hamburger.open .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open .bar:nth-child(2){ opacity:0; }
.hamburger.open .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--bg); }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:17px 24px; font-size:15px; color:var(--fg-muted); border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ color:var(--fg); }
.mobile-nav a.accent{ color:var(--accent); font-weight:600; }

.hero{ position:relative; padding:100px 48px; overflow:hidden; }
.hero-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.hero-dots{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}
.hero-layout{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:36px; align-items:center; }
.hero h1{ font-family:'Momo Trust Display', 'Bricolage Grotesque', system-ui, sans-serif; font-weight:800; font-size:clamp(36px, 4.6vw, 62px); line-height:1.05; letter-spacing:-.02em; max-width:15ch; margin:22px 0 26px; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{ font-size:17px; line-height:1.6; color:var(--fg-muted); max-width:48ch; margin:0 0 36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-slider{ position:relative; height:600px; display:flex; gap:14px; overflow:hidden; mask-image:linear-gradient(to right, transparent 0%, black 26%, black 88%, transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0%, black 26%, black 88%, transparent 100%); }
.slider-col{ flex:1; display:flex; flex-direction:column; gap:14px; animation-name:scroll-up; animation-timing-function:linear; animation-iteration-count:infinite; }
.slider-col.down{ animation-name:scroll-down; }
.slider-col img{ width:100%; height:auto; display:block; border:none; background:var(--surface); }
.slider-fade{ position:absolute; left:0; right:0; height:120px; pointer-events:none; z-index:2; }
.slider-fade.top{ top:0; background:linear-gradient(to bottom, var(--bg), transparent); }
.slider-fade.bottom{ bottom:0; background:linear-gradient(to top, var(--bg), transparent); }
@keyframes scroll-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes scroll-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .slider-col, .pf-col{ animation:none; } }
@media (max-width:860px){
  .hero-layout{ grid-template-columns:1fr; }
  .hero-slider{ display:none; }
}

.btn-primary{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; background:var(--accent); color:#FFFFFF; font-weight:600; font-size:15px; transition:background .15s ease; border:none; cursor:pointer; font-family:inherit; }
.btn-primary:hover{ background:color-mix(in srgb, var(--accent) 85%, white); }
.btn-ghost{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border:1px solid var(--line); color:var(--fg); font-weight:600; font-size:15px; transition:border-color .15s ease; }
.btn-ghost:hover{ border-color:var(--fg-muted); }

section{ padding:100px 48px; border-top:1px solid var(--line); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:48px; max-width:1180px; margin-left:auto; margin-right:auto; }
.section-head h2{ font-family:'Momo Trust Display', 'Bricolage Grotesque', system-ui, sans-serif; font-weight:700; font-size:clamp(28px, 3.4vw, 42px); letter-spacing:-.01em; margin:12px 0 0; text-wrap:balance; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line); color:var(--fg-muted); background:transparent; cursor:pointer; transition:all .15s ease; }
.chip:hover{ border-color:var(--fg-muted); color:var(--fg); }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }

.subfilters{ max-width:1180px; margin:-28px auto 40px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }
.subfilters.hidden{ display:none; }
.chip.sub{ padding:6px 4px; font-size:11px; letter-spacing:0; text-transform:none; color:var(--fg-muted); background:transparent; border:none; }
.chip.sub:hover{ color:var(--accent); }
.chip.sub.active{ background:transparent; border:none; color:var(--accent); }

.pf-shell{ position:relative; height:700px; max-width:1180px; margin:0 auto; overflow:hidden; display:flex; gap:14px; padding:0 14px; box-sizing:border-box; mask-image:linear-gradient(to right, transparent 0%, black 24%, black 76%, transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0%, black 24%, black 76%, transparent 100%); }
.pf-fade{ position:absolute; left:0; right:0; height:180px; pointer-events:none; z-index:2; }
.pf-fade.top{ top:0; background:linear-gradient(to bottom, var(--bg), transparent); }
.pf-fade.bottom{ bottom:0; background:linear-gradient(to top, var(--bg), transparent); }
.pf-col{ flex:1; display:flex; flex-direction:column; gap:14px; animation-name:scroll-up; animation-timing-function:linear; animation-iteration-count:infinite; }
.pf-col.down{ animation-name:scroll-down; }
.pf-col img{ width:100%; height:auto; display:block; border:none; background:var(--surface); }

.pf-disclaimer{ max-width:1180px; margin:28px auto 0; font-size:12px; line-height:1.6; color:var(--fg-muted); }

.about-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:start; }
.quote{ font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:600; font-size:clamp(24px, 2.6vw, 32px); line-height:1.32; letter-spacing:-.01em; text-wrap:balance; }
.quote span{ color:var(--accent); }
.about-copy p{ font-size:16px; line-height:1.7; color:var(--fg-muted); margin:0 0 18px; }
.about-copy strong{ color:var(--fg); font-weight:600; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--line); color:var(--fg-muted); }
.resume-btn{ margin-top:28px; }
.resume-btn svg{ width:17px; height:17px; flex-shrink:0; }

.contact{ text-align:left; position:relative; overflow:hidden; }
.contact-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.contact-dots{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55; }
.contact h2{ font-family:'Momo Trust Display', 'Bricolage Grotesque', system-ui, sans-serif; font-weight:700; font-size:clamp(28px, 3.4vw, 40px); margin:0 0 40px; }
.email-link{ font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:600; font-size:clamp(14px, 1.3vw, 17px); letter-spacing:-.005em; display:inline-block; max-width:100%; border-bottom:2px solid var(--line); padding-bottom:8px; transition:border-color .15s ease, color .15s ease; white-space:nowrap; }
.email-link:hover{ border-color:var(--accent); color:var(--accent); }
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); }
.field input, .field textarea{ background:var(--surface); border:1px solid var(--line); color:var(--fg); padding:13px 14px; font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:15px; outline:none; transition:border-color .15s ease; }
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb, var(--fg-muted) 70%, transparent); }
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea{ min-height:130px; resize:vertical; font-family:inherit; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.btn-primary:disabled{ opacity:.6; cursor:default; }

.form{ position:relative; }
.form-popup{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -46%);
  z-index:5;
  width:min(340px, 88%);
  background:var(--accent);
  color:#FFFFFF;
  padding:20px 40px 20px 22px;
  border-radius:14px;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:14.5px;
  font-weight:500;
  line-height:1.5;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.form-popup.show{ opacity:1; transform:translate(-50%, -50%); pointer-events:auto; }
.form-popup-close{
  position:absolute;
  top:8px; right:10px;
  background:none; border:none;
  color:#FFFFFF;
  font-size:20px; line-height:1;
  cursor:pointer;
  opacity:.85;
}
.form-popup-close:hover{ opacity:1; }
.info-panel{ padding:32px; background:var(--surface); border:1px solid var(--line); }
.info-panel .lede{ font-size:14px; color:var(--fg-muted); line-height:1.6; margin:0 0 26px; }
.contact-meta{ display:flex; flex-wrap:wrap; gap:24px; margin-top:26px; }
.contact-meta .item .k{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:6px; }
.contact-meta .item .v{ font-size:15px; font-weight:500; }
.contact-meta .item a:hover{ color:var(--accent); }
.social-row{ display:flex; gap:14px; margin-top:30px; }
.social-row a{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--fg-muted); transition:all .15s ease; }
.social-row a:hover{ border-color:var(--accent); color:var(--accent); }
.social-row a svg{ width:18px; height:18px; }

footer{ border-top:1px solid var(--line); padding:32px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer .fmark{ font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:700; font-size:14px; }
footer .fnote{ font-size:12.5px; color:var(--fg-muted); }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  .nav-inner, section, .hero{ padding-left:24px; padding-right:24px; }
  .hero{ padding-top:80px; padding-bottom:90px; }
  section{ padding-top:70px; padding-bottom:70px; }
  .form-row{ grid-template-columns:1fr; }
}