/* ORIGIN — originisorigin.com · Brand: Origin Orange #EA6B2D · Black #000 · White #FFF (Origin Brandguides June 2020) */

@font-face{
  font-family:"Fixture Expanded";
  src:url("fonts/FixtureExpandedMedium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fixture Condensed";
  src:url("fonts/FixtureCondensedMedium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --orange:#EA6B2D;
  --orange-deep:#C0531F;
  --black:#0A0A09;
  --coal:#111110;
  --cream:#FFFAF0;
  --mist:rgba(255,250,240,.6);
  --faint:rgba(255,250,240,.34);
  --line:rgba(255,250,240,.14);
  --disp:"Fixture Expanded","Helvetica Neue",Arial,sans-serif;
  --cond:"Fixture Condensed","Helvetica Neue",Arial,sans-serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,84px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--black); color:var(--cream);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--orange); color:var(--black);}

/* grain */
body::after{
  content:""; position:fixed; inset:-100%; pointer-events:none; z-index:999; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)}
  60%{transform:translate(-5%,-2%)} 80%{transform:translate(4%,4%)}
}
@media(prefers-reduced-motion:reduce){body::after{animation:none;}}

/* ---------- header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad);
  mix-blend-mode:difference;
}
.hdr .brand img{height:30px; width:auto;}
.hdr nav{display:flex; gap:2px;}
.hdr nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; padding:8px 12px;
  opacity:.65; transition:opacity .15s;
}
.hdr nav a:hover{opacity:1;}
@media(max-width:640px){
  .hdr{padding:12px 16px;}
  .hdr .brand img{height:24px;}
  .hdr nav{flex-wrap:wrap; justify-content:flex-end;}
  .hdr nav a{padding:5px 5px; font-size:9.5px; letter-spacing:.12em;}
}

/* ---------- type ---------- */
h1,h2,h3,p{margin:0;}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:center; gap:14px;
}
.kicker::before{content:""; width:34px; height:2px; background:var(--orange); flex:none;}
.disp{font-family:var(--disp); font-weight:500; letter-spacing:-.045em; line-height:.94; text-transform:uppercase; text-wrap:balance;}
.cond{font-family:var(--cond); font-weight:500; text-transform:uppercase; line-height:.92;}
.em{color:var(--orange);}
.lead{font-size:clamp(16px,1.6vw,21px); line-height:1.55; color:var(--mist); max-width:54ch;}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; padding:86px var(--pad) 4vh;}
.hero .halo{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 42% at 72% 30%, rgba(234,107,45,.17), transparent 70%);
}
.hero .meta{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  padding:0 0 3vh;
}
.hero h1{
  font-size:clamp(58px,14.5vw,250px);
  margin-left:-.045em;
}
.hero h1 .row{display:block; overflow:hidden;}
.hero h1 .row span{display:block; transform:translateY(110%); animation:rise .9s cubic-bezier(.2,.65,.2,1) forwards;}
.hero h1 .row:nth-child(2) span{animation-delay:.12s;}
.hero h1 .row:nth-child(3) span{animation-delay:.24s;}
@keyframes rise{to{transform:none;}}
@media(prefers-reduced-motion:reduce){.hero h1 .row span{transform:none; animation:none;}}
.hero .strap{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:end;
  border-top:1px solid var(--line); margin-top:4vh; padding-top:3vh;
}
@media(max-width:760px){.hero .strap{grid-template-columns:1fr;}}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0; background:var(--coal);}
.ticker .belt{display:flex; gap:0; width:max-content; animation:belt 36s linear infinite;}
.ticker:hover .belt{animation-play-state:paused;}
.ticker .set{display:flex; align-items:center; white-space:nowrap;}
.ticker .set span{
  font-family:var(--cond); font-size:clamp(22px,3vw,36px); text-transform:uppercase; letter-spacing:.02em;
  color:var(--mist); padding:0 22px;
}
.ticker .set i{width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none;}
@keyframes belt{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.ticker .belt{animation:none;}}

/* ---------- sections ---------- */
.sect{padding:clamp(80px,13vh,150px) var(--pad); position:relative;}
.wrap{max-width:1340px; margin:0 auto;}
.secthead{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,72px);}
.secthead h2{font-size:clamp(38px,6.5vw,96px);}
.secthead .count{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--faint);}

/* ---------- manifesto ---------- */
#manifesto{
  font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(26px,4.3vw,62px); line-height:1.04; max-width:22ch;
}
#manifesto .dim{color:var(--faint); transition:color .5s;}
#manifesto .dim.lit{color:var(--cream);}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--line);}
.svc-row{
  display:grid; grid-template-columns:110px 1fr 1.15fr; gap:clamp(16px,3vw,48px); align-items:baseline;
  border-bottom:1px solid var(--line); padding:clamp(26px,4vh,44px) 0; transition:background .25s, padding-left .25s;
}
.svc-row:hover{background:rgba(234,107,45,.05); padding-left:14px;}
.svc-row .n{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--orange);}
.svc-row h3{font-family:var(--cond); font-size:clamp(30px,4.4vw,58px); text-transform:uppercase;}
.svc-row p{font-size:15.5px; line-height:1.55; color:var(--mist); max-width:52ch;}
@media(max-width:820px){.svc-row{grid-template-columns:56px 1fr;} .svc-row p{grid-column:2;}}

/* ---------- work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,26px);}
.case{position:relative; overflow:hidden; background:var(--coal); text-decoration:none; display:block;}
.case .ph{aspect-ratio:4/3; overflow:hidden;}
.case.tall .ph{aspect-ratio:3/4;}
.case .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(28%) contrast(1.04); transition:transform .8s cubic-bezier(.2,.65,.2,1), filter .5s;}
.case:hover .ph img{transform:scale(1.045); filter:grayscale(0%) contrast(1.02);}
.case .tag{
  position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream); background:rgba(10,10,9,.72); padding:6px 10px; backdrop-filter:blur(6px);
}
.case .cap{padding:16px 2px 6px; display:flex; justify-content:space-between; gap:14px; align-items:baseline;}
.case .cap h3{font-family:var(--cond); font-size:clamp(22px,2.4vw,32px); text-transform:uppercase;}
.case .cap span{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); text-align:right; flex:none;}
.c-6{grid-column:span 6;} .c-4{grid-column:span 4;} .c-8{grid-column:span 8;}
@media(max-width:760px){.c-6,.c-4,.c-8{grid-column:span 12;}}

/* text-only case card */
.case.text{border:1px solid var(--line); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:14px; justify-content:space-between; min-height:100%;}
.case.text:hover{border-color:var(--orange);}
.case.text .tag{position:static; padding:0; background:none; color:var(--orange);}
.case.text h3{font-family:var(--cond); font-size:clamp(26px,3vw,44px); text-transform:uppercase;}
.case.text p{font-size:14.5px; line-height:1.55; color:var(--mist);}

/* ---------- numbers ---------- */
.nums{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); border-top:1px solid var(--line); padding-top:clamp(30px,5vh,54px);}
@media(max-width:760px){.nums{grid-template-columns:1fr;}}
.num .v{font-family:var(--disp); font-size:clamp(44px,6.5vw,92px); letter-spacing:-.04em; color:var(--orange); line-height:1;}
.num .k{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin-top:10px; display:block; line-height:1.7;}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center;}
@media(max-width:860px){.about{grid-template-columns:1fr;}}
.about .ph{position:relative; overflow:hidden;}
.about .ph img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:contrast(1.05);}
.about .ph::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line);}
.about .stack{display:flex; flex-direction:column; gap:26px;}
.about h2{font-size:clamp(34px,4.8vw,72px);}
.about .sig{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);}

/* ---------- contact ---------- */
.contact{background:var(--orange); color:var(--black); padding:clamp(90px,15vh,170px) var(--pad) clamp(50px,8vh,80px);}
.contact ::selection{background:var(--black); color:var(--orange);}
.contact .kicker{color:rgba(10,10,9,.62);}
.contact .kicker::before{background:var(--black);}
.contact h2{font-size:clamp(44px,9vw,150px); margin:26px 0 8vh; margin-left:-.04em;}
.contact a.mail{
  text-decoration:none; display:inline-block; position:relative;
}
.contact a.mail::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.06em; background:var(--black); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.65,.2,1);}
.contact a.mail:hover::after{transform:scaleX(1);}
.contact .row{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; border-top:2px solid var(--black); padding-top:26px;}
.contact .row .links{display:flex; gap:26px;}
.contact .row a{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid transparent;}
.contact .row a:hover{border-color:var(--black);}
.contact .row .fine{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(10,10,9,.6);}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.rv.seen{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none;}}