/* ==========================================================================
   Ruble Visuals — design system + Home page
   Fonts: Anton (display) + Inter (body), loaded via <link> in the HTML head.
   Accent: Ruble Yellow #F6C445 (golden). Motion is GPU-friendly and reduced-motion aware.
   ========================================================================== */

:root{
  /* Brand */
  --accent:#F6C445;      /* Ruble Yellow — golden accent (decorative pops, button fills w/ ink text) */
  --accent-ink:#8A6A00;  /* deep gold — small text / labels on white (WCAG AA) */
  --accent-deep:#5C4700; /* darkest gold — depth */
  --accent-tint:#FEF6DD; /* soft wash background */
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --paper-2:#F5F5F3;
  --line:#E6E6E6;
  --muted:#6B6B6B;

  /* Type */
  --font-display:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tracking-display:.01em;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.6s;

  /* Layout */
  --wrap:1200px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --nav-h:72px;
}

/* Reset ------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:clip; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* Type -------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:var(--tracking-display); line-height:1.02; margin:0; }
h1{ font-size:clamp(3rem, 9vw, 8rem); }
h2{ font-size:clamp(2.1rem, 5.2vw, 4.5rem); }
h3{ font-size:clamp(1.5rem, 3vw, 2.5rem); }
p{ margin:0 0 1rem; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.375rem); line-height:1.6; color:#2a2a2a; }
.eyebrow{ font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); }
.accent{ color:var(--accent); }

/* Layout ------------------------------------------------------------------ */
.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.section{ padding:clamp(4rem, 10vw, 9rem) 0; }
.section--tight{ padding:clamp(3rem,6vw,5rem) 0; }

/* Buttons ----------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-weight:600; font-size:.95rem; letter-spacing:.02em; padding:.9em 1.6em; border-radius:999px; border:1.5px solid transparent; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:var(--ink); color:var(--accent); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--ghost.on-dark:hover{ background:#fff; color:var(--ink); }

/* Skip link --------------------------------------------------------------- */
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:200; }
.skip:focus{ left:.5rem; top:.5rem; }

/* Placeholder image slots (swap for Alex's originals) --------------------- */
.ph{ position:relative; background:var(--paper-2); border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; color:var(--muted); }
.ph::after{ content:attr(data-label); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.5em 1em; }
.ph--dark{ background:#141414; border-color:#242424; color:#8a8a8a; }
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:1; }

/* Header / nav ------------------------------------------------------------ */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:1.5rem; }
.brand{ font-family:var(--font-display); font-size:1.35rem; letter-spacing:.04em; white-space:nowrap; }
.brand .dot{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav__links a:not(.btn){ font-size:.9rem; font-weight:500; color:#333; position:relative; padding:.25rem 0; }
.nav__links a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--accent-ink); transition:right .3s var(--ease); }
.nav__links a:not(.btn):hover{ color:var(--ink); }
.nav__links a:not(.btn):hover::after{ right:0; }
.nav__ext{ display:inline-flex; align-items:center; gap:.25em; }
.nav__cta{ margin-left:.25rem; }
.nav__toggle{ display:none; background:none; border:0; width:44px; height:44px; align-items:center; justify-content:center; }
.nav__toggle span{ display:block; width:24px; height:2px; background:var(--ink); position:relative; transition:background .2s; }
.nav__toggle span::before,.nav__toggle span::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); transition:transform .3s var(--ease), top .3s var(--ease); }
.nav__toggle span::before{ top:-7px; } .nav__toggle span::after{ top:7px; }
.nav.is-open .nav__toggle span{ background:transparent; }
.nav.is-open .nav__toggle span::before{ top:0; transform:rotate(45deg); }
.nav.is-open .nav__toggle span::after{ top:0; transform:rotate(-45deg); }

/* Hero -------------------------------------------------------------------- */
.hero{ position:relative; min-height:calc(100svh - var(--nav-h)); display:flex; align-items:flex-end; background:var(--ink); color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; will-change:transform; }
.hero__media .ph{ width:100%; height:120%; }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.15), rgba(10,10,10,.75)); }
.hero__inner{ position:relative; z-index:1; padding-block:clamp(2.5rem,7vw,6rem); }
.hero h1{ max-width:16ch; }
.hero__sub{ max-width:46ch; margin-top:1.25rem; color:#e9e9e9; font-size:clamp(1rem,1.5vw,1.25rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:2rem; z-index:1; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#cfcfcf; writing-mode:vertical-rl; }

/* Marquee ----------------------------------------------------------------- */
.marquee{ overflow:hidden; white-space:nowrap; border-block:1px solid var(--line); }
.marquee--ink{ background:var(--ink); color:#fff; border-color:#1c1c1c; }
.marquee__track{ display:inline-flex; align-items:center; gap:2.5rem; padding:.9rem 0; animation:scroll-x 34s linear infinite; will-change:transform; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:.02em; display:inline-flex; align-items:center; gap:2.5rem; }
.marquee__item .sep{ color:var(--accent); }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Image marquee (cards) --------------------------------------------------- */
.filmstrip{ overflow:hidden; }
.filmstrip__track{ display:inline-flex; gap:1rem; padding:.5rem 0; animation:scroll-x 48s linear infinite; will-change:transform; }
.filmstrip:hover .filmstrip__track{ animation-play-state:paused; }
.film-card{ flex:0 0 auto; width:clamp(240px,30vw,360px); }
.film-card .ph{ aspect-ratio:4/3; border-radius:12px; }
.film-card__cap{ margin-top:.6rem; font-size:.85rem; color:var(--muted); }

/* Intro ------------------------------------------------------------------- */
.intro__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.intro h2{ max-width:14ch; }
.meta-line{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; font-family:var(--font-display); font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:.04em; }
.meta-line span:not(:first-child){ position:relative; padding-left:1.5rem; }
.meta-line span:not(:first-child)::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; background:var(--accent-ink); border-radius:50%; transform:translateY(-50%); }

/* Video band -------------------------------------------------------------- */
.showreel{ position:relative; }
.showreel__frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; }
.showreel__frame video,.showreel__frame .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.showreel__play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.showreel__play button{ width:88px; height:88px; border-radius:50%; background:var(--accent); border:0; color:var(--ink); display:grid; place-items:center; transition:transform .3s var(--ease); }
.showreel__play button:hover{ transform:scale(1.08); }
.showreel__play svg{ width:28px; height:28px; margin-left:4px; }

/* Industries -------------------------------------------------------------- */
.industries__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,1.6vw,1.4rem); }
.ind-card{ position:relative; display:block; overflow:hidden; border-radius:14px; color:#fff; }
.ind-card .ph{ aspect-ratio:5/4; transition:transform .6s var(--ease); }
.ind-card:nth-child(3n){ grid-row:span 1; }
.ind-card:hover .ph{ transform:scale(1.05); }
.ind-card__label{ position:absolute; left:0; bottom:0; right:0; padding:1.25rem 1.4rem; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(180deg,transparent,rgba(10,10,10,.72)); z-index:2; }
.ind-card__label h3{ font-size:clamp(1.4rem,2.4vw,2.1rem); }
.ind-card__arrow{ font-family:var(--font-body); font-weight:600; opacity:.9; transition:transform .3s var(--ease); }
.ind-card:hover .ind-card__arrow{ transform:translateX(6px); }
.ind-card--wide{ grid-column:span 2; }
.ind-card--wide .ph{ aspect-ratio:16/6; }

/* What we do -------------------------------------------------------------- */
.services__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.services__list{ list-style:none; margin:0; padding:0; }
.services__list li{ display:flex; align-items:baseline; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); font-size:clamp(1.05rem,1.8vw,1.5rem); }
.services__list li:last-child{ border-bottom:1px solid var(--line); }
.services__list .num{ font-family:var(--font-display); color:var(--accent-ink); font-size:.9rem; min-width:2.5rem; }

/* Logo strip -------------------------------------------------------------- */
.logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,4rem); }
.logo-chip{ font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:.02em; color:#b7b7b7; filter:grayscale(1); transition:color .3s, transform .3s var(--ease); }
.logo-chip:hover{ color:var(--ink); transform:translateY(-2px); }

/* Stats ------------------------------------------------------------------- */
.stats{ background:var(--ink); color:#fff; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.stat__num{ font-family:var(--font-display); font-size:clamp(2.6rem,7vw,5.5rem); line-height:1; color:#fff; }
.stat__num .accent{ color:var(--accent); }
.stat__label{ margin-top:.5rem; color:#b9b9b9; font-size:.95rem; }

/* Testimonial ------------------------------------------------------------- */
.quote{ text-align:center; }
.quote blockquote{ margin:0 auto; max-width:20ch; font-family:var(--font-display); font-size:clamp(2rem,5vw,4rem); line-height:1.06; }
.quote .mark{ color:var(--accent); font-size:1.4em; line-height:0; }
.quote cite{ display:block; margin-top:1.5rem; font-style:normal; font-weight:600; letter-spacing:.02em; color:var(--muted); }

/* CTA band ---------------------------------------------------------------- */
.cta-band{ background:var(--accent); color:var(--ink); text-align:center; }
.cta-band h2{ max-width:18ch; margin-inline:auto; }
.cta-band .btn--light{ background:var(--ink); color:#fff; margin-top:2rem; }
.cta-band .btn--light:hover{ background:#fff; color:var(--ink); }

/* Footer ------------------------------------------------------------------ */
.site-footer{ background:var(--ink); color:#cfcfcf; padding:clamp(3rem,6vw,5rem) 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer__brand .brand{ color:#fff; font-size:1.6rem; }
.footer__brand p{ margin-top:.75rem; max-width:34ch; color:#9a9a9a; }
.footer h4{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:#7d7d7d; margin-bottom:1rem; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.6rem; }
.footer a{ color:#cfcfcf; }
.footer a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid #242424; color:#7d7d7d; font-size:.85rem; }

/* Reveal on scroll -------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }

/* Responsive -------------------------------------------------------------- */
@media (max-width:860px){
  .nav__links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:1rem var(--gutter) 1.5rem; transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:0 20px 40px rgba(0,0,0,.06); }
  .nav.is-open .nav__links{ transform:translateY(0); }
  .nav__links li{ width:100%; }
  .nav__links a:not(.btn){ display:block; padding:.85rem 0; font-size:1.05rem; border-bottom:1px solid var(--line); }
  .nav__links a.nav__cta{ display:inline-flex; }
  .nav__cta{ margin:.75rem 0 0; }
  .nav__toggle{ display:inline-flex; }
  .intro__grid,.services__grid{ grid-template-columns:1fr; }
  .industries__grid{ grid-template-columns:1fr; }
  .ind-card--wide{ grid-column:span 1; }
  .stats__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .footer__grid{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .marquee__track,.filmstrip__track{ animation:none !important; }
  .filmstrip,.marquee{ overflow-x:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__media{ transform:none !important; }
}

/* ============================ Interior pages ============================= */
.nav__links a:not(.btn)[aria-current="page"]{ color:var(--ink); }
.nav__links a:not(.btn)[aria-current="page"]::after{ right:0; }

.page-hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; padding-block:clamp(3.5rem,10vw,7rem); }
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media .ph{ width:100%; height:100%; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(10,10,10,.4),rgba(10,10,10,.72)); }
.page-hero__inner{ position:relative; z-index:1; }
.page-hero .eyebrow{ color:var(--accent); }
.page-hero h1{ font-size:clamp(2.6rem,8vw,6rem); max-width:16ch; margin-top:.5rem; }
.page-hero p{ max-width:54ch; margin-top:1.25rem; color:#e9e9e9; font-size:clamp(1rem,1.6vw,1.25rem); }
.page-hero .hero__cta{ margin-top:1.75rem; }

.section-head{ max-width:30ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head h2{ margin-top:.5rem; }
.prose{ max-width:62ch; }
.prose p{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:#333; line-height:1.7; }

.value-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.value-row + .value-row{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.value-row--flip .value-row__text{ order:2; }
.value-row .ph{ aspect-ratio:4/3; border-radius:14px; }
.value-row h3{ font-size:clamp(1.5rem,3vw,2.4rem); margin-bottom:.6rem; }
.value-row p{ color:#333; margin:0; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); }
.card{ border:1px solid var(--line); border-radius:14px; padding:clamp(1.25rem,2.5vw,1.9rem); background:var(--paper); transition:transform .3s var(--ease), border-color .3s; }
.card:hover{ transform:translateY(-4px); border-color:var(--ink); }
.card .num{ font-family:var(--font-display); color:var(--accent-ink); font-size:1rem; letter-spacing:.04em; }
.card h3{ font-size:clamp(1.2rem,2vw,1.55rem); margin:.4rem 0 .5rem; }
.card p{ color:#444; margin:0; font-size:.98rem; }

.casestudy{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.casestudy__media{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.casestudy__media .ph{ aspect-ratio:4/5; border-radius:16px; }
.casestudy__step{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; }
.casestudy__step .num{ font-family:var(--font-display); color:var(--accent-ink); }
.casestudy__step h3{ font-size:clamp(1.5rem,3vw,2.4rem); margin:.3rem 0 .6rem; }
.casestudy__step p{ color:#333; max-width:44ch; }

.gallery{ column-count:3; column-gap:1rem; }
.gallery .ph{ width:100%; margin:0 0 1rem; break-inside:avoid; border-radius:10px; }
.gallery .ph:nth-child(4n+1){ aspect-ratio:4/5; }
.gallery .ph:nth-child(4n+2){ aspect-ratio:1/1; }
.gallery .ph:nth-child(4n+3){ aspect-ratio:3/4; }
.gallery .ph:nth-child(4n){ aspect-ratio:4/3; }

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem); }
.team-card .ph{ aspect-ratio:3/4; border-radius:12px; }
.team-card h3{ font-size:1.2rem; margin:.8rem 0 .1rem; }
.team-card .role{ color:var(--accent-ink); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.team-card p{ color:#555; font-size:.95rem; margin-top:.4rem; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.filter{ font-family:var(--font-body); font-weight:600; font-size:.9rem; padding:.5em 1.1em; border-radius:999px; border:1.5px solid var(--line); background:none; color:#444; transition:background .2s, color .2s, border-color .2s; }
.filter:hover{ border-color:var(--ink); color:var(--ink); }
.filter.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.is-hidden{ display:none !important; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4rem); align-items:start; }
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#333; margin-bottom:.4rem; }
.form-field input,.form-field select,.form-field textarea{ width:100%; font:inherit; padding:.85em 1em; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); transition:border-color .2s; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none; border-color:var(--accent-ink); }
.form-field textarea{ min-height:150px; resize:vertical; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:1rem; font-weight:500; min-height:1.4em; }
.form-status.err{ color:#b00020; }
.form-status.ok{ color:#1a7f37; }

@media (max-width:860px){
  .value-row,.casestudy,.contact-grid{ grid-template-columns:1fr; }
  .value-row--flip .value-row__text{ order:0; }
  .casestudy__media{ position:static; }
  .casestudy__step{ min-height:0; margin-bottom:2rem; }
  .cards{ grid-template-columns:1fr; }
  .gallery{ column-count:2; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .gallery{ column-count:1; }
  .team-grid{ grid-template-columns:1fr; }
}