/* ============================================================
   RAW LOCAL — marketing site v2
   Brand: Real · Bold · Local. Grunge / street / high-contrast.
   ============================================================ */

@font-face { font-family:'Anton'; src:url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/assets/fonts/Archivo-Variable.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'PermanentMarker'; src:url('/assets/fonts/PermanentMarker-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'SpaceMono'; src:url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'SpaceMono'; src:url('/assets/fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --ink:#0A0A0A; --ink-2:#0d0d0d; --asphalt:#161616; --asphalt-hi:#1f1f1f;
  --red:#E11B22; --deep-red:#C8141B; --bone:#F4EEE1; --chalk:#FFFFFF;
  --smoke:#9A9590; --hairline:#262626;
  --maxw:1200px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--bone);
  font-family:'Archivo',system-ui,sans-serif; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--chalk); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#333; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* film grain */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- type helpers ---- */
.display{ font-family:'Anton',sans-serif; text-transform:uppercase; color:var(--chalk);
  line-height:.98; letter-spacing:.5px; }
.label{ font-family:'SpaceMono',monospace; text-transform:uppercase; letter-spacing:.32em;
  font-size:11px; color:var(--smoke); }
.mono{ font-family:'SpaceMono',monospace; }
.red{ color:var(--red); }
.container{ width:min(var(--maxw),90vw); margin-inline:auto; }
.section{ padding:clamp(72px,11vw,150px) 0; position:relative; }
.divider{ border-top:1px solid var(--hairline); }
.bg-2{ background:var(--ink-2); }

/* icons */
.icon{ width:1em; height:1em; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; }

/* brush stroke behind a word (organic SVG) */
.brush{ position:relative; display:inline-block; color:var(--chalk); padding:0 .12em; white-space:nowrap; z-index:0; }
.brush::before{
  content:''; position:absolute; z-index:-1; left:-.05em; right:-.05em; top:8%; bottom:6%;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M4,30 C60,10 150,8 200,16 C260,24 350,6 396,20 C402,40 398,58 392,66 C330,52 230,70 170,58 C110,48 50,68 8,54 C2,46 0,38 4,30 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M4,30 C60,10 150,8 200,16 C260,24 350,6 396,20 C402,40 398,58 392,66 C330,52 230,70 170,58 C110,48 50,68 8,54 C2,46 0,38 4,30 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform:rotate(-1.6deg);
}

/* ---- buttons ---- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:'SpaceMono',monospace; font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; padding:16px 30px; cursor:pointer; border:1.6px solid transparent;
  transform:rotate(-1.4deg); transition:transform .18s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s,color .2s; }
.btn .icon{ font-size:18px; }
.btn-primary{ background:var(--red); color:var(--chalk); box-shadow:0 10px 30px -8px rgba(225,27,34,.55); }
.btn-primary:hover{ background:var(--deep-red); transform:rotate(-1.4deg) translateY(-2px) scale(1.02); box-shadow:0 16px 40px -10px rgba(225,27,34,.7); }
.btn-ghost{ background:transparent; color:var(--bone); border-color:#3a3a3a; }
.btn-ghost:hover{ border-color:var(--red); color:var(--chalk); transform:rotate(-1.4deg) translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:11px; }

/* ============================================================ NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:18px clamp(18px,4vw,52px);
  border-bottom:1px solid transparent; transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s; }
.nav.scrolled{ background:rgba(10,10,10,.85); backdrop-filter:blur(12px); border-bottom-color:var(--hairline); padding-block:13px; }
.wordmark{ display:flex; align-items:center; gap:7px; font-family:'Anton'; font-size:23px; text-transform:uppercase; letter-spacing:.5px; }
.wordmark .raw{ background:var(--red); color:var(--chalk); padding:2px 8px; transform:rotate(-2deg); }
.wordmark .local{ color:var(--bone); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.navlink{ font-family:'SpaceMono',monospace; font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--smoke); position:relative; padding:4px 0; transition:color .2s; }
.navlink::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red); transition:width .25s; }
.navlink:hover{ color:var(--bone); } .navlink:hover::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:0; color:var(--bone); cursor:pointer; }
.nav-toggle .icon{ font-size:28px; }

/* ============================================================ HERO */
.hero{ min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(20px); will-change:transform; }
.hero-bg .g1{ width:60vw; height:60vw; top:-15%; right:-10%;
  background:radial-gradient(circle,rgba(225,27,34,.28),transparent 62%); }
.hero-bg .g2{ width:45vw; height:45vw; bottom:-20%; left:-12%;
  background:radial-gradient(circle,rgba(225,27,34,.12),transparent 60%); }
.hero-bg .grid-lines{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask:radial-gradient(circle at 70% 30%,#000,transparent 70%); mask:radial-gradient(circle at 70% 30%,#000,transparent 70%); }
.hero-inner{ position:relative; z-index:2; padding-top:96px; }
.hero .kicker{ margin-bottom:26px; }
.hero h1{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk);
  font-size:clamp(52px,10.5vw,148px); line-height:1.0; letter-spacing:-.5px; }
.hero h1 .ln{ display:block; }
.hero p.sub{ max-width:560px; margin:30px 0 40px; color:#c9c4bb; font-size:clamp(15px,1.5vw,18px); line-height:1.65; }
.hero-cta{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:34px; margin-top:54px; flex-wrap:wrap; }
.hero-meta .m b{ font-family:'Anton'; color:var(--chalk); font-size:30px; display:block; line-height:1; }
.hero-meta .m span{ font-size:11px; letter-spacing:.2em; }
.scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint .bar{ width:1px; height:34px; background:linear-gradient(var(--red),transparent); animation:scrolldot 1.8s infinite; }
@keyframes scrolldot{ 0%{opacity:0;transform:scaleY(.3)} 50%{opacity:1} 100%{opacity:0;transform:scaleY(1) translateY(6px)} }

/* marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--hairline); background:var(--red); padding:14px 0; }
.marquee-track{ display:inline-flex; gap:40px; white-space:nowrap; animation:scrollx 22s linear infinite; }
.marquee span{ font-family:'Anton'; text-transform:uppercase; font-size:22px; letter-spacing:2px; color:var(--ink); display:inline-flex; align-items:center; gap:40px; }
.marquee .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; display:inline-block; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================ section head */
.sec-head{ max-width:760px; }
.sec-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; }
.sec-label .tick{ width:24px; height:2px; background:var(--red); }
.sec-title{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk);
  font-size:clamp(34px,5.5vw,68px); line-height:1.0; letter-spacing:0; }
.sec-intro{ color:var(--smoke); max-width:580px; margin-top:20px; font-size:17px; }

/* ============================================================ cards / services */
.grid{ display:grid; gap:22px; margin-top:54px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.tilt{ transform-style:preserve-3d; transition:transform .15s ease; will-change:transform; }
.card{ position:relative; background:linear-gradient(160deg,var(--asphalt),var(--ink-2));
  border:1px solid var(--hairline); padding:34px 30px; overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s; }
.card::before{ content:''; position:absolute; top:0; left:0; width:42px; height:42px;
  border-top:2px solid var(--red); border-left:2px solid var(--red); opacity:0; transition:opacity .3s,transform .3s; transform:translate(-6px,-6px); }
.card:hover{ border-color:#3a3a3a; box-shadow:0 30px 60px -30px #000; }
.card:hover::before{ opacity:1; transform:none; }
.card .ico-badge{ width:56px; height:56px; display:grid; place-items:center; background:var(--ink);
  border:1px solid var(--hairline); color:var(--red); margin-bottom:22px; transform:rotate(-3deg); }
.card .ico-badge .icon{ font-size:26px; }
.card .num{ font-family:'Anton'; font-size:50px; color:#2c2c2c; line-height:1; -webkit-text-stroke:1px #3a3a3a; }
.card h3{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:25px; margin:16px 0 12px; letter-spacing:.5px; }
.card p{ color:var(--smoke); font-size:15px; line-height:1.65; }

/* ============================================================ gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
.shot{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--hairline);
  background:
    linear-gradient(160deg,rgba(225,27,34,.30),rgba(10,10,10,.92)),
    repeating-linear-gradient(45deg,#141414 0 14px,#191919 14px 28px);
  transition:transform .4s,filter .4s; filter:grayscale(.2); }
.shot:nth-child(even){ margin-top:26px; }
.shot:hover{ transform:translateY(-8px); filter:grayscale(0); }
.shot .tag{ position:absolute; left:14px; bottom:14px; }
.shot .frame{ position:absolute; inset:10px; border:1px solid rgba(244,238,225,.18); }

/* ============================================================ steps connector */
.steps .card{ background:var(--ink-2); }

/* ============================================================ packages */
.pkg{ margin-top:50px; }
.pkg-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:linear-gradient(160deg,var(--asphalt),var(--ink-2)); border:1px solid var(--hairline);
  padding:28px 30px; margin-bottom:16px; transition:border-color .25s,transform .25s; }
.pkg-row:hover{ border-color:var(--red); transform:translateX(6px); }
.pkg-row .pk-name{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:27px; letter-spacing:.5px; }
.pkg-row .pk-type{ margin-top:6px; }
.pkg-row .pk-desc{ color:var(--smoke); margin-top:10px; font-size:14.5px; }
.pkg-row .price{ font-family:'Anton'; color:var(--red); font-size:clamp(30px,4vw,46px); white-space:nowrap; }
.pkg-row .price small{ display:block; font-family:'SpaceMono',monospace; font-size:10px; letter-spacing:.2em; color:var(--smoke); text-align:right; }
.pkg-row.feat{ border-color:#3a3a3a; }
.pkg-row .badge{ position:absolute; top:-11px; right:24px; background:var(--red); color:var(--chalk);
  font-family:'SpaceMono',monospace; font-size:10px; letter-spacing:.18em; padding:3px 10px; transform:rotate(-2deg); }

/* ============================================================ cities */
.cities{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.city-chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--hairline);
  padding:12px 20px; font-family:'SpaceMono',monospace; text-transform:uppercase; letter-spacing:.12em;
  font-size:13px; color:var(--bone); transition:border-color .2s,color .2s,background .2s; }
.city-chip .icon{ font-size:15px; color:var(--red); }
.city-chip:hover{ border-color:var(--red); background:rgba(225,27,34,.08); }

/* ============================================================ CTA */
.cta-band{ text-align:center; }
.cta-stamp{ display:inline-block; position:relative; padding:clamp(40px,6vw,72px) clamp(30px,7vw,90px);
  background:linear-gradient(160deg,var(--asphalt),var(--ink-2)); border:2px solid var(--red); transform:rotate(-1.6deg); }
.cta-stamp h2{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:clamp(36px,7vw,90px); line-height:1.0; }
.cta-stamp .label{ margin-bottom:18px; }
.cta-stamp .btn{ margin-top:32px; }

/* ============================================================ footer */
.footer{ border-top:1px solid var(--hairline); padding:64px 0 44px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.footer .tag{ color:var(--smoke); max-width:330px; margin-top:16px; font-size:14.5px; line-height:1.7; }
.footer .col-title{ margin-bottom:16px; }
.footer .col a{ display:block; color:var(--smoke); font-family:'SpaceMono',monospace; font-size:13px; padding:6px 0; transition:color .2s; }
.footer .col a:hover{ color:var(--red); }
.footer .copyright{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline);
  color:var(--smoke); font-size:12px; font-family:'SpaceMono',monospace; letter-spacing:.1em;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ============================================================ reveal anim */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================ responsive */
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .grid-3,.grid-4,.gallery{ grid-template-columns:1fr; }
  .shot:nth-child(even){ margin-top:0; }
  .nav-toggle{ display:block; }
  .nav-links{ position:fixed; inset:0 0 0 28%; flex-direction:column; justify-content:center; gap:30px;
    background:rgba(10,10,10,.98); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1);
    border-left:1px solid var(--hairline); padding:40px; }
  .nav-links.open{ transform:none; }
  .pkg-row{ flex-direction:column; align-items:flex-start; }
  .pkg-row .price{ text-align:left; } .pkg-row .price small{ text-align:left; }
  .hero-meta{ gap:24px; }
}