/* fonts */
/* Google Fonts substitutes — Anton (display), Instrument Sans (body), IBM Plex Mono (labels) */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* colors */
:root{
  /* Ink — warm blacks (base) */
  --ink-950:#0D0C0B; --ink-900:#141210; --ink-800:#1C1A17; --ink-700:#272420; --ink-600:#3A352F; --ink-400:#6E665C;
  /* Cream — the hero colour */
  --cream-50:#FAF6EE; --cream-100:#F3EADB; --cream-200:#EBDDC4; --cream-300:#D8C6A6; --cream-500:#A8977A;
  /* Signal — single accent, POP-display vermilion */
  --signal-500:oklch(0.66 0.19 38); --signal-600:oklch(0.58 0.19 38); --signal-200:oklch(0.88 0.06 45);
  /* Semantic */
  --surface-page:var(--ink-900); --surface-raised:var(--ink-800); --surface-sunk:var(--ink-950); --surface-inverse:var(--cream-200);
  --text-primary:var(--cream-200); --text-strong:var(--cream-50); --text-muted:var(--cream-500); --text-inverse:var(--ink-900); --text-accent:var(--signal-500);
  --border-subtle:rgba(235,221,196,.14); --border-strong:rgba(235,221,196,.5); --border-solid:var(--cream-200);
  --accent:var(--signal-500); --accent-hover:var(--signal-600);
  --scrim:linear-gradient(180deg,rgba(13,12,11,0) 40%,rgba(13,12,11,.85) 100%);
}

/* typography */
:root{
  --font-display:'Anton','Oswald','Impact',sans-serif;
  --font-body:'Instrument Sans','Helvetica Neue',Helvetica,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Display scale — fluid */
  --fs-mega:clamp(88px,17vw,280px); --fs-d1:clamp(64px,10vw,160px); --fs-d2:clamp(48px,6.5vw,104px); --fs-d3:clamp(36px,4vw,64px); --fs-d4:32px;
  /* Text scale */
  --fs-lead:22px; --fs-body:17px; --fs-small:14px; --fs-label:12px;
  --lh-display:.86; --lh-tight:1.15; --lh-body:1.55;
  --ls-display:-.01em; --ls-label:.16em; --ls-caps:.04em;
  --outline-stroke:1.5px;
}

/* spacing */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:144px;
  --gutter:clamp(20px,4vw,64px); --section-y:clamp(80px,12vw,176px); --maxw:1440px;
  --radius-0:0; --radius-1:2px; --radius-pill:999px;
  --border-hair:1px; --border-bold:2px;
  --shadow-lift:0 30px 60px -20px rgba(0,0,0,.6);
}

/* motion */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.76,0,.24,1); --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:180ms; --dur-base:420ms; --dur-slow:900ms; --dur-hero:1400ms; --stagger:70ms;
}
@keyframes jl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes jl-rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes jl-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-hero:0ms;--stagger:0ms}}

/* components */
/* Class layer for plain-HTML consumers (Netlify site). JSX components use the same classes. */
.jl-root{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
.jl-root a{color:var(--text-primary);text-decoration:none}
.jl-root a:hover{color:var(--accent)}
.jl-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;font:500 13px/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;border:var(--border-hair) solid transparent;border-radius:var(--radius-0);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);position:relative;overflow:hidden;text-decoration:none}
.jl-btn:active{transform:scale(.97)}
.jl-btn .jl-btn__arrow{transition:transform var(--dur-base) var(--ease-out)}
.jl-btn:hover .jl-btn__arrow{transform:translateX(6px)}
.jl-btn--primary{background:var(--cream-200);color:var(--ink-900)}
.jl-btn--primary:hover{background:var(--accent);color:var(--cream-50)}
.jl-btn--outline{background:transparent;color:var(--cream-200);border-color:var(--border-strong)}
.jl-btn--outline:hover{background:var(--cream-200);color:var(--ink-900);border-color:var(--cream-200)}
.jl-btn--signal{background:var(--accent);color:var(--cream-50)}
.jl-btn--signal:hover{background:var(--cream-200);color:var(--ink-900)}
.jl-btn--ghost{background:transparent;color:var(--cream-200);padding:0;height:auto;border-bottom:1px solid var(--border-strong);padding-bottom:6px}
.jl-btn--ghost:hover{color:var(--accent);border-color:var(--accent)}
.jl-btn--sm{height:40px;padding:0 18px;font-size:11px}
.jl-btn[disabled]{opacity:.35;pointer-events:none}
.jl-tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-200);transition:all var(--dur-fast) var(--ease-out);background:transparent;cursor:default}
.jl-tag--active,.jl-tag[aria-pressed="true"]{background:var(--cream-200);color:var(--ink-900);border-color:var(--cream-200)}
.jl-tag--signal{border-color:var(--accent);color:var(--accent)}
button.jl-tag{cursor:pointer}button.jl-tag:hover{border-color:var(--cream-200)}
.jl-eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.jl-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.jl-eyebrow__num{color:var(--accent)}
.jl-display{font-family:var(--font-display);font-weight:400;line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--cream-200);margin:0}
.jl-outline{color:transparent;-webkit-text-stroke:var(--outline-stroke) var(--cream-200)}
.jl-word{display:inline-flex;overflow:hidden}
.jl-word>span{display:inline-block}
.jl-marquee{overflow:hidden;border-block:1px solid var(--border-subtle);padding:22px 0;white-space:nowrap}
.jl-marquee__track{display:inline-flex;gap:48px;animation:jl-marquee var(--marquee-dur,28s) linear infinite}
.jl-marquee:hover .jl-marquee__track{animation-play-state:paused}
.jl-marquee__item{font:400 var(--fs-d3)/1 var(--font-display);text-transform:uppercase;color:var(--cream-200);display:inline-flex;align-items:center;gap:48px}
.jl-marquee__item:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--cream-200)}
.jl-marquee__dot{width:12px;height:12px;background:var(--accent);border-radius:50%;flex:none}
.jl-stat{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--border-strong)}
.jl-stat__value{font:400 var(--fs-d2)/.9 var(--font-display);color:var(--cream-200)}
.jl-stat__value sup{font-size:.45em;color:var(--accent);vertical-align:top;margin-left:4px}
.jl-stat__label{font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.jl-project{display:block;position:relative;overflow:hidden;background:var(--ink-800);color:var(--cream-200);text-decoration:none}
.jl-project__media{position:relative;overflow:hidden;aspect-ratio:var(--ratio,4/5);background:var(--cream-100)}
.jl-project__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out);filter:grayscale(.15)}
.jl-project:hover .jl-project__media img{transform:scale(1.06);filter:grayscale(0)}
.jl-project__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 0 0;background:var(--surface-page)}
.jl-project__title{font:400 28px/1 var(--font-display);text-transform:uppercase;margin:0}
.jl-project__client{font:500 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.jl-project__index{font:500 11px/1 var(--font-mono);color:var(--accent)}
.jl-project__badge{position:absolute;top:16px;left:16px;z-index:2}
.jl-service{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:24px;padding:28px 0;border-top:1px solid var(--border-subtle);position:relative;cursor:default;transition:padding var(--dur-base) var(--ease-out)}
.jl-service:last-child{border-bottom:1px solid var(--border-subtle)}
.jl-service__num{font:500 12px/1 var(--font-mono);color:var(--accent)}
.jl-service__title{font:400 var(--fs-d3)/1 var(--font-display);text-transform:uppercase;transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.jl-service__desc{max-width:340px;font-size:var(--fs-small);color:var(--text-muted)}
.jl-service:hover .jl-service__title{color:transparent;-webkit-text-stroke:1px var(--cream-200);transform:translateX(16px)}
.jl-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 var(--gutter);font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.jl-nav__brand{font:400 22px/1 var(--font-display);letter-spacing:.02em}
.jl-nav__links{display:flex;gap:32px}
.jl-nav__link{position:relative;color:var(--cream-200);padding:6px 0}
.jl-nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-base) var(--ease-out)}
.jl-nav__link:hover::after,.jl-nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.jl-field{display:flex;flex-direction:column;gap:10px}
.jl-field__label{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.jl-field__input{background:transparent;border:0;border-bottom:1px solid var(--border-strong);color:var(--cream-50);font:400 22px/1.3 var(--font-body);padding:10px 0;outline:none;transition:border-color var(--dur-fast) var(--ease-out);resize:vertical}
.jl-field__input::placeholder{color:var(--ink-400)}
.jl-field__input:focus{border-color:var(--accent)}
.jl-field--error .jl-field__input{border-color:var(--accent)}
.jl-field__hint{font-size:13px;color:var(--text-muted)}
.jl-field--error .jl-field__hint{color:var(--accent)}