:root{
  --bg:#ffffff;
  --surface:#fff4e6;
  --ink:#211a12;
  --muted:#6b5d4f;
  --accent:#B4530A;
  --accent2:#ffda00;
  --white:#ffffff;
  --border-soft:rgba(33,26,18,0.1);
  --header-bg:rgba(255,255,255,0.92);
  --ph-alt:#ffe8c9;
  --overlay-accent:rgba(180,83,10,0.35);
  --overlay-accent2:rgba(255,218,0,0.35);
  --radius:24px;
  --font-display:'Familjen Grotesk', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-utility:'Space Mono', monospace;
  --step--1:0.707rem;
  --step-0:1rem;
  --step-1:1.414rem;
  --step-2:2rem;
  --step-3:2.828rem;
  --step-4:4rem;
  --step-5:5.657rem;
  --step-6:8.485rem;
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:64px;
  --space-8:96px;
  --space-9:128px;
  --section-pad:64px;
  --measure:60ch;
  --shadow-1:0 0 0 4px rgba(180,83,10,0.18);
  --shadow-2:0 0 0 6px rgba(255,218,0,0.22);
  --ease:cubic-bezier(.22,.9,.26,1);
  --dur-1:0.5s;
  --dur-2:0.9s;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.5;
  margin:0;
}

h1,h2{
  font-family:var(--font-display);
  letter-spacing:-0.03em;
  margin:0;
  line-height:1.02;
}

p{margin:0;max-width:var(--measure);color:var(--muted);}

section{padding-block:var(--section-pad);overflow:hidden;position:relative;}

a{color:inherit;}

/* ===== HEADER ===== */
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:var(--space-5);
  padding-block:var(--space-3);
  position:sticky;
  inset-block-start:0;
  background:var(--header-bg);
  backdrop-filter:none;
  z-index:50;
}
.bar-brand{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:700;
  letter-spacing:-0.02em;
}
.bar-nav{
  display:flex;
  gap:var(--space-5);
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.bar-nav a{
  font-family:var(--font-body);
  text-decoration:none;
  color:var(--ink);
}
.bar-cta{
  font-family:var(--font-display);
  background:var(--accent);
  color:var(--white);
  padding-block:var(--space-2);
  padding-inline:var(--space-4);
  border-radius:5000px;
  text-decoration:none;
  transition:filter var(--dur-1) var(--ease);
}
.bar-cta:hover{filter:brightness(1.1);}

/* ===== HERO ===== */
.hero{
  padding-block-start:var(--space-8);
  padding-block-end:var(--space-9);
  padding-inline:var(--space-5);
}
.hero-inner{
  position:relative;
  min-block-size:640px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-blob{
  position:absolute;
  inset-inline-end:-5%;
  inset-block-start:-10%;
  inline-size:min(50vw,520px);
  aspect-ratio:1/1;
  background:var(--accent2);
  border-radius:50%;
  z-index:0;
  opacity:0.85;
}
.hero-collage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
  z-index:1;
}
.hero-collage .ph{
  block-size:100%;
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  background-size:cover;
  background-position:center;
}
.hero-collage .ph:nth-child(1){transform:rotate(-4deg) translateY(10px);background-image:linear-gradient(rgba(33,26,18,0.08),rgba(33,26,18,0.08)),none;}
.hero-collage .ph:nth-child(2){transform:rotate(3deg) translateY(-14px);background-image:linear-gradient(rgba(33,26,18,0.08),rgba(33,26,18,0.08)),none;}
.hero-collage .ph:nth-child(3){transform:rotate(-2deg) translateY(18px);background-image:linear-gradient(rgba(33,26,18,0.08),rgba(33,26,18,0.08)),none;}
.hero-collage .ph:nth-child(4){transform:rotate(5deg) translateY(-6px);background-image:linear-gradient(rgba(33,26,18,0.08),rgba(33,26,18,0.08)),none;}
.hero-copy{
  position:relative;
  z-index:2;
  max-inline-size:60ch;
}
.hero-eyebrow{
  font-family:var(--font-utility);
  text-transform:uppercase;
  font-size:var(--step--1);
  color:var(--accent);
  letter-spacing:0.08em;
  display:block;
  margin-block-end:var(--space-3);
}
.hero-headline{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px,7vw,84px);
  position:relative;
  z-index:2;
  background:var(--white);
  display:inline-block;
  line-height:1.15;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding-inline:var(--space-3);
  padding-block:var(--space-2);
  box-shadow:8px 8px 0 var(--ink);
  border:2px solid var(--ink);
}
.hero-sub{
  margin-block-start:var(--space-6);
  font-size:var(--step-1);
  color:var(--muted);
  max-width:42ch;
}
.hero-ctas{
  display:flex;
  gap:var(--space-3);
  margin-block-start:var(--space-5);
  flex-wrap:wrap;
}
.btn-primary{
  font-family:var(--font-display);
  background:var(--accent);
  color:var(--white);
  border:none;
  padding-block:var(--space-3);
  padding-inline:var(--space-5);
  border-radius:48px;
  font-size:var(--step-0);
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-4px);box-shadow:var(--shadow-1);}
.btn-secondary{
  font-family:var(--font-display);
  background:var(--white);
  color:var(--ink);
  border:2px solid var(--ink);
  padding-block:var(--space-3);
  padding-inline:var(--space-5);
  border-radius:48px;
  font-size:var(--step-0);
  text-decoration:none;
  display:inline-block;
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn-secondary:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}

.ph{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--surface);
  background-image:
    var(--ph-image, repeating-linear-gradient(135deg, var(--surface) 0 24px, var(--ph-alt) 24px 48px));
  background-size:cover;
  background-position:center;
  border:2px solid var(--ink);
}
.ph::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%, var(--overlay-accent), transparent 60%),
             radial-gradient(circle at 80% 80%, var(--overlay-accent2), transparent 55%);
  opacity:0.35;
}

/* ===== SERVICES ===== */
.services{background:var(--surface);}
.services-head{
  text-align:start;
  max-width:60ch;
  margin-block-end:var(--space-6);
  padding-inline:var(--space-5);
}
.section-title{font-size:var(--step-4);}
.section-sub{margin-block-start:var(--space-3);font-size:var(--step-1);}

.marquee-wrap{
  position:relative;
  overflow:hidden;
  padding-block:var(--space-4);
  mask-image:linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
}
.marquee-track{
  display:flex;
  gap:var(--space-3);
  width:max-content;
  animation:marquee 24s linear infinite;
}
.marquee-item{
  font-family:var(--font-utility);
  text-transform:uppercase;
  font-size:var(--step-0);
  font-weight:700;
  padding-block:var(--space-4);
  padding-inline:var(--space-5);
  border-radius:5000px;
  white-space:nowrap;
  border:2px solid var(--ink);
}
.marquee-item:nth-child(odd){background:var(--surface);}
.marquee-item:nth-child(even){background:var(--accent2);}
.marquee-sep{
  font-family:var(--font-utility);
  color:var(--muted);
  display:flex;
  align-items:center;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:var(--space-4);
  padding-inline:var(--space-5);
  margin-block-start:var(--space-6);
  position:relative;
}
.service-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-4);
  border:1px solid var(--border-soft);
  box-shadow:5px 5px 0 var(--border-soft);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.service-card:nth-child(3n+1){transform:translateY(-12px) rotate(-1.5deg);}
.service-card:nth-child(3n+2){transform:rotate(1deg);}
.service-card:nth-child(3n+3){transform:rotate(-0.5deg);}
.service-card:hover{transform:translateY(-4px) rotate(0deg);box-shadow:var(--shadow-1);}
.card-title{font-family:var(--font-display);font-size:var(--step-2);}
.card-text{margin-block-start:var(--space-2);font-size:var(--step-0);}
.tri{
  position:absolute;
  inline-size:0;block-size:0;
  border-inline-start:40px solid transparent;
  border-inline-end:40px solid transparent;
  border-block-end:70px solid var(--accent2);
  opacity:0.6;
  z-index:0;
}

/* ===== WORK ===== */
.work{background:var(--bg);}
.work-head{padding-inline:var(--space-5);margin-block-end:var(--space-5);}
.work-scroll{
  display:flex;
  gap:calc(var(--space-6) * -1 + var(--space-4));
  overflow-x:auto;
  padding-inline:var(--space-5);
  padding-block-end:var(--space-3);
  scroll-snap-type:x proximity;
}
.work-item{
  position:relative;
  flex:0 0 auto;
  inline-size:min(70vw,360px);
  aspect-ratio:1/1;
  scroll-snap-align:start;
}
.work-item .ph{box-shadow:6px 6px 0 var(--ink);}
.work-item:nth-child(1){transform:rotate(-3deg);}
.work-item:nth-child(1) .ph{border-radius:50%;--ph-image:none;}
.work-item:nth-child(2){transform:rotate(2deg);}
.work-item:nth-child(2) .ph{border-radius:var(--radius);--ph-image:none;}
.work-item:nth-child(3){transform:rotate(-2deg);}
.work-item:nth-child(3) .ph{border-radius:0 var(--radius) 0 var(--radius);--ph-image:none;}
.work-item:nth-child(4){transform:rotate(3deg);}
.work-item:nth-child(4) .ph{border-radius:50%;--ph-image:none;}
.work-label{
  position:absolute;
  inset-block-end:var(--space-3);
  inset-inline-start:var(--space-3);
  font-family:var(--font-utility);
  text-transform:uppercase;
  font-size:var(--step--1);
  background:var(--white);
  padding-block:var(--space-1);
  padding-inline:var(--space-2);
  border-radius:5000px;
  border:1px solid var(--ink);
  z-index:2;
}

/* ===== PROCESS ===== */
.process{background:var(--surface);}
.process-spine{
  position:relative;
  max-width:900px;
  margin-inline:auto;
  padding-inline:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.process-step{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:var(--space-4);
  align-items:center;
}
.process-num{
  font-family:var(--font-display);
  font-size:clamp(3rem,12vw,7rem);
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  line-height:1;
  margin-inline-start:calc(-1 * var(--space-5));
}
.process-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-4);
  border:1px solid var(--border-soft);
  box-shadow:5px 5px 0 var(--border-soft);
}
.process-card h3{font-family:var(--font-display);font-size:var(--step-2);}
.process-card p{margin-block-start:var(--space-2);}

/* ===== WHY ZXR ===== */
.why{background:var(--bg);}
.why-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:center;
  padding-inline:var(--space-5);
}
.why-list{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.why-pill{
  font-family:var(--font-body);
  background:var(--surface);
  border:1px solid var(--ink);
  padding-block:var(--space-2);
  padding-inline:var(--space-4);
  border-radius:5000px;
  font-size:var(--step-0);
  box-shadow:3px 3px 0 var(--ink);
}
.why-pill:nth-child(odd){transform:rotate(-2deg);}
.why-pill:nth-child(even){transform:rotate(2deg);}
.why-circle{
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--accent);
  background-image:linear-gradient(rgba(180,83,10,0.55),rgba(180,83,10,0.55)),none;
  background-size:cover;
  background-position:center;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  text-align:center;
}
.why-circle p{
  font-family:var(--font-display);
  font-size:var(--step-3);
  color:var(--white);
  max-width:14ch;
}

/* ===== TESTIMONIALS ===== */
.testi{background:var(--surface);}
.testi-track{
  display:flex;
  gap:var(--space-4);
  width:max-content;
  animation:marquee 32s linear infinite;
  padding-inline:var(--space-5);
}
.testi-card{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-4);
  inline-size:min(80vw,380px);
  flex:0 0 auto;
  box-shadow:5px 5px 0 var(--ink);
}
.testi-card::before{
  content:'';
  position:absolute;
  inset-block-start:-16px;
  inset-inline-end:-16px;
  inline-size:60px;
  block-size:60px;
  background:var(--accent2);
  border-radius:50%;
  z-index:-1;
}
.testi-quote{font-size:var(--step-1);color:var(--ink);}
.testi-by{
  display:block;
  margin-block-start:var(--space-3);
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
  text-transform:uppercase;
}

/* ===== CONTACT ===== */
.contact{background:var(--bg);}
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding-inline:var(--space-5);
  align-items:center;
  position:relative;
}
.contact-blob{
  background:var(--accent);
  border-radius:50%;
  aspect-ratio:1/1;
  color:var(--white);
  padding:var(--space-8);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-3);
}
.contact-blob .hero-eyebrow{color:var(--accent2);}
.contact-blob h2{font-size:var(--step-3);color:var(--white);}
.contact-blob p{color:var(--white);}
.contact-email{
  font-family:var(--font-utility);
  color:var(--accent2);
  text-decoration:underline;
}
.lead-form{
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-5);
  border:1px solid var(--border-soft);
  margin-inline-start:-40px;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  position:relative;
  z-index:2;
  box-shadow:6px 6px 0 var(--ink);
}
.lead-form input,
.lead-form textarea{
  font-family:var(--font-body);
  border:1px solid var(--muted);
  border-radius:var(--radius);
  padding-block:var(--space-3);
  padding-inline:var(--space-4);
  font-size:var(--step-0);
  background:var(--surface);
  color:var(--ink);
}
.lead-form input:focus,
.lead-form textarea:focus{outline:2px solid var(--accent);}
.lead-form button{
  font-family:var(--font-display);
  background:var(--accent);
  color:var(--white);
  border:none;
  padding-block:var(--space-3);
  border-radius:48px;
  font-size:var(--step-1);
  cursor:pointer;
  transition:filter var(--dur-1) var(--ease);
}
.lead-form button:hover{filter:brightness(1.1);}
.lead-done{
  font-family:var(--font-utility);
  color:var(--accent);
  font-size:var(--step--1);
}

/* ===== FOOTER ===== */
.footer{
  padding-block:var(--space-6);
  padding-inline:var(--space-5);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
  border-block-start:1px solid var(--border-soft);
}

@media (max-width:768px){
  .hero-inner,.why-inner,.contact-inner{grid-template-columns:1fr;}
  .process-step{grid-template-columns:1fr;}
  .lead-form{margin-inline-start:0;}
  .contact-blob{aspect-ratio:auto;}
  .hero-collage{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:390px){
  .bar-nav{display:none;}
  .service-card:nth-child(3n+1){transform:none;}
}




@media (prefers-reduced-motion: reduce){[data-motion]{opacity:1;transform:none}}