/* ARC — Auto Refinish Color Solutions
   Reproduced from the client-supplied Phase 1 design PDF (ARC_Website_Design_2024_2.pdf).
   Font note: the PDF specifies Gotham (XLight/Book/Light), a commercial H&Co typeface not
   licensed in this project. Substituted with Jost, a free geometric sans with near-identical
   proportions and the same light/thin premium feel. Flagged for Jasper/David to swap for a
   licensed Gotham webfont if the client wants pixel-exact type. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Barlow:wght@400;500;600&display=swap');

:root{
  --cyan:   #16a3a0;
  --lime:   #c7d100;
  --magenta:#8a1f8f;
  --red:    #e2231a;
  --ink:    #141414;
  --paper:  #ffffff;
  --muted:  #8a8a8a;
  --line:   #e6e6e6;
  --dark-bg:#0b0b0c;
  --dark-ink:#f2f2f2;
  --font-display:'Jost', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* ---------- reveal-on-scroll (headline slide-in) ---------- */
.reveal{opacity:0;transform:translateX(-40px);transition:opacity .9s ease,transform .9s ease}
.reveal.right{transform:translateX(40px)}
.reveal.up{transform:translateY(30px)}
.reveal.in{opacity:1;transform:translate(0,0)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:#fff;border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:96px}
.nav-links{display:flex;gap:44px;list-style:none}
.nav-links a{
  font-family:var(--font-display);font-weight:500;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:800px){.nav-links{display:none}}

/* ---------- ARC logo mark (redrawn from the PDF badge — vector art in the
   original InDesign file, not a raster asset, so it is recreated here rather
   than pixel-extracted) ---------- */
.arc-logo{display:flex;align-items:center;gap:12px}
.arc-badge{
  width:56px;height:52px;position:relative;
  background:var(--ink);border-radius:26px 26px 6px 6px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.arc-badge::before{
  content:'';position:absolute;top:0;left:0;right:0;height:46%;
  background:conic-gradient(from 200deg at 50% 100%,
    #e2231a, #f2911c, #e7d21a, #7bc142, #16a3a0, #2f6fd6, #8a1f8f, #e2231a);
  border-radius:26px 26px 0 0;
}
.arc-badge span{
  position:relative;z-index:1;font-family:var(--font-display);font-weight:600;
  color:#fff;font-size:1.05rem;letter-spacing:.02em;margin-top:8px;
}
.arc-wordmark{line-height:1.15}
.arc-wordmark b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.arc-wordmark i{
  display:block;font-style:italic;font-family:Georgia,serif;font-size:.72rem;
  color:var(--muted);
}

/* ---------- hero slider ---------- */
.hero{
  position:relative;height:88vh;min-height:560px;max-height:900px;
  overflow:hidden;background:#000;
}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;
}
.hero-slide.active{opacity:1;z-index:2}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 7s linear;
}
.hero-slide.active img{transform:scale(1)}

/* CMY colour blocks — the brief's signature move: translucent cyan/lime/magenta
   rectangles drifting slowly over the hero photography. */
.hero-blocks{position:absolute;inset:0;z-index:3;pointer-events:none}
.hblock{position:absolute;mix-blend-mode:screen;opacity:.68;filter:saturate(1.2)}
.hblock.c{background:var(--cyan);width:22%;height:56%;left:6%;top:20%;
  animation:driftA 14s ease-in-out infinite;}
.hblock.l{background:var(--lime);width:20%;height:44%;left:46%;top:8%;
  animation:driftB 17s ease-in-out infinite;}
.hblock.m{background:var(--magenta);width:20%;height:60%;right:6%;top:22%;
  animation:driftC 20s ease-in-out infinite;}
@keyframes driftA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%,-4%) scale(1.05)}
}
@keyframes driftB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4%,5%) scale(.96)}
}
@keyframes driftC{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3%,-5%) scale(1.04)}
}

.hero-copy{
  position:absolute;z-index:4;left:0;bottom:14%;width:100%;
}
.hero-copy .wrap{max-width:1320px}
.hero-head{
  font-family:var(--font-display);font-weight:300;color:#fff;
  font-size:clamp(2.2rem,5.4vw,4.4rem);letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  opacity:0;transform:translateY(24px);
  transition:opacity .9s ease,transform .9s ease;
}
.hero-head.active-head{opacity:1;transform:translateY(0)}

.hero-dots{position:absolute;z-index:5;right:40px;bottom:40px;display:flex;gap:10px}
.hero-dots button{
  width:34px;height:3px;background:rgba(255,255,255,.4);border:none;cursor:pointer;
  transition:background .3s ease;
}
.hero-dots button.active{background:#fff}

/* ---------- iso strip ---------- */
.iso-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.iso-strip .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:110px;
}
.iso-strip h2{
  font-family:var(--font-display);font-weight:300;color:#b9b9b9;
  font-size:clamp(1.3rem,2.6vw,2.1rem);
}
.iso-badge{
  width:56px;height:56px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.05em;
  border-radius:2px;
}
.iso-badge small{font-size:.5rem;font-weight:400;margin-top:2px}

/* ---------- dark section (art of color) ---------- */
.dark{background:var(--dark-bg);color:var(--dark-ink)}
.split{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;
  padding:110px 0;
}
@media (max-width:900px){.split{grid-template-columns:1fr;padding:70px 0;gap:36px}}
.split.rev{grid-template-columns:1fr 1fr}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.kicker svg{width:26px;height:26px;flex:none}
.kicker span{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.6rem);color:inherit;
}
.split h3{
  font-family:var(--font-display);font-weight:300;line-height:1.14;
  font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:22px;
}
.split h3 em{font-style:normal;color:var(--lime)}
.split h3 em.cy{color:var(--cyan)}
.dark p{color:#b7b7b7;margin-bottom:16px;max-width:46ch}
.split .art{position:relative}
.split .art img{border-radius:2px}

/* fan-deck sweep highlight, once in view */
.fandeck-frame{position:relative;overflow:hidden;border-radius:2px}
.fandeck-frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);
}
.fandeck-frame.sweep::after{animation:sweep 1.4s ease forwards}
@keyframes sweep{to{transform:translateX(120%)}}

/* ---------- anatomy of a swatch ---------- */
.chip-diagram{
  position:relative;width:210px;aspect-ratio:5/9;margin:0 auto;
  background:
    repeating-linear-gradient(0deg,rgba(22,163,160,.55) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(22,163,160,.55) 0 1px,transparent 1px 22px),
    linear-gradient(160deg,#0f4a49,#124f4d 40%,#0a2f2e);
  border-radius:14px;border:1px solid var(--cyan);
}
.chip-diagram::before{
  content:'';position:absolute;inset:-6px;border-radius:18px;
  border:1px solid rgba(22,163,160,.5);
  box-shadow:0 0 0 rgba(22,163,160,0);
}
.chip-diagram.glow::before{animation:chipglow 2.6s ease-in-out infinite}
@keyframes chipglow{
  0%,100%{box-shadow:0 0 0 rgba(22,163,160,0)}
  50%{box-shadow:0 0 34px 6px rgba(22,163,160,.55)}
}
.chip-callouts{
  position:relative;margin-top:60px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;
  font-family:var(--font-body);
}
.chip-callouts div b{
  display:block;font-family:var(--font-display);font-weight:400;font-size:.98rem;color:#fff;
}
.chip-callouts div span{color:var(--cyan);font-size:.86rem}

/* ---------- spray banner ---------- */
.spray-banner{position:relative;height:60vh;min-height:380px;overflow:hidden;background:#04201f}
.spray-banner img{width:100%;height:100%;object-fit:cover;opacity:.85}
.spray-banner .overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(4,32,31,.55),rgba(4,32,31,.15) 45%,rgba(4,32,31,.55));
}
.spray-text{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.5rem,4vw,3.2rem);text-align:center;position:relative;
}
/* Sprayed-paint reveal: dim base copy, solid-white layer wiped in left-to-right
   via clip-path (not a background-clip:text gradient — that reads as decorative
   filler text; this is a literal, functional "paint landing" reveal instead). */
.spray-text .base{color:rgba(255,255,255,.22)}
.spray-text .fill{
  position:absolute;inset:0;color:#fff;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.6s cubic-bezier(.4,0,.2,1);
}
.spray-text.sprayed .fill{clip-path:inset(0 0 0 0)}

/* ---------- light section / swatches like no other ---------- */
.light-split{padding:110px 0}
.light-split h3{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,3.6vw,3rem);
  margin-bottom:26px;
}
.light-split p{color:#4a4a4a;margin-bottom:14px;max-width:52ch}
.zoom-frame{overflow:hidden;border-radius:2px}
.zoom-frame img{transition:transform .6s ease}
.zoom-frame:hover img{transform:scale(1.1)}

/* ---------- cabinet ticker ---------- */
.ticker-wrap{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:36px 0;overflow:hidden;
}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
.ticker-track img{
  height:150px;width:auto;margin:0 18px;border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- footer ---------- */
footer.dark{padding:90px 0 0}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:70px}
.foot-addr{font-family:var(--font-body);color:#c9c9c9;line-height:1.9}
.foot-addr a{color:var(--cyan)}
.foot-mark{opacity:.9}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.12);padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.foot-bar span{
  font-family:var(--font-display);font-weight:500;letter-spacing:.18em;font-size:.72rem;
  text-transform:uppercase;color:#e6e6e6;
}
.foot-copy{font-size:.78rem;color:#8f8f8f}

/* ---------- our-difference specific ---------- */
.diff-hero{position:relative;height:70vh;min-height:480px;overflow:hidden;background:#000}
.diff-hero img{width:100%;height:100%;object-fit:cover}
.diff-hero .hero-blocks{opacity:1}
.diff-hero .hero-copy{bottom:12%}

.bullets{list-style:none;margin-top:8px}
.bullets li{
  position:relative;padding-left:22px;margin-bottom:14px;color:#4a4a4a;max-width:52ch;
}
.bullets li::before{
  content:'';position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--red);
  clip-path:polygon(0 0,70% 50%,0 100%);
}
.dark .bullets li{color:#c9c9c9}
.dark .bullets li::before{background:var(--lime)}

.quote-band{
  position:relative;padding:120px 0;background:#0d2b2a;overflow:hidden;
}
.quote-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.quote-band .wrap{position:relative;z-index:1}
.quote-band p{
  font-family:var(--font-display);font-weight:300;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.6rem);max-width:16ch;line-height:1.25;
}

.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;padding:100px 0;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.incorrect-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media (max-width:700px){.incorrect-row{grid-template-columns:1fr}}
.incorrect-card{position:relative;border-radius:2px;overflow:hidden}
.incorrect-card img{width:100%}
.incorrect-tag{
  position:absolute;top:16px;left:16px;background:var(--red);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;padding:6px 12px;
}