:root{
  --bg: #ffffff;
  --panel: #f2f0ec;
  --panel-alt: #eaedf0;
  --text: #16161a;
  --text-dim: #5b5d62;
  --steel: #6d7075;
  --red: #a8222f;
  --red-hover: #8c1b26;
  --line: rgba(22,22,26,0.12);
  --hero-bg: #16161a;
  --hero-text: #f3f2ee;
  --hero-dim: #b7b6b2;
  --hero-line: rgba(243,242,238,0.14);
  --header-h: 72px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h); overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--red); color:#fff; padding:12px 20px; z-index:1000;
}
.skip-link:focus{left:0;}

h1,h2,h3{text-wrap:balance;}

.section-wrap{max-width:1080px; margin:0 auto; padding:88px 24px;}
.section-head{margin-bottom:36px;}
.section-head .eyebrow{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.section-head h2{
  font-family:'Big Shoulders',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,38px); margin:0; letter-spacing:-0.01em;
}
.eyebrow{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--red);}
.headline-md{font-family:'Big Shoulders',sans-serif; font-weight:700; font-size:clamp(22px,3vw,30px); margin:14px 0 16px;}
.body-text{font-size:16px; line-height:1.6; color:var(--text-dim); max-width:560px; margin:0;}

/* Buttons */
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}
.btn{
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px;
  padding:14px 24px; border-radius:2px; text-decoration:none; display:inline-block;
  border:1px solid transparent; cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-hover);}
.btn-outline{border-color:var(--hero-line); color:var(--hero-text);}
.btn-outline:hover{border-color:var(--hero-text);}
.btn-onlight{border-color:var(--line); color:var(--text);}
.btn-onlight:hover{border-color:var(--text);}
.btn-sm{padding:9px 16px; font-size:13px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
.site-header-inner{
  max-width:1080px; margin:0 auto; padding:0 24px; height:100%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
}
.header-logo img{height:36px; width:auto;}
.header-nav{display:flex; justify-content:center; gap:22px;}
.header-nav a{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.header-nav a:hover{color:var(--red); border-color:var(--red);}
.header-cta{display:flex; gap:10px; justify-self:end;}

/* Hero v2 */
.hero-v2{
  position:relative;
  background:var(--hero-bg);
  color:var(--hero-text);
  padding:0 0 76px;
  overflow:visible;
}
.hero-v2::after{
  content:"";
  position:absolute; inset:0;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.05;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero-v2 .crop{position:absolute; width:14px; height:14px; pointer-events:none;}
.hero-v2 .crop::before,.hero-v2 .crop::after{content:"";position:absolute;background:var(--hero-line);}
.hero-v2 .crop::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.hero-v2 .crop::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
.hero-v2 .crop.tl{top:16px;left:16px;}
.hero-v2 .crop.br{bottom:16px;right:16px;}
.hero-bg-slideshow{position:absolute; inset:0; pointer-events:none;}
.hero-bg-slide{
  position:absolute; inset:0;
  background-image:linear-gradient(100deg, rgba(22,22,26,0.94) 0%, rgba(22,22,26,0.8) 45%, rgba(22,22,26,0.55) 100%), var(--hero-photo);
  background-size:cover; background-position:center center;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-bg-slide.is-active{opacity:1;}

.docket-strip{
  position:relative;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:16px 48px;
  border-bottom:1px dashed var(--hero-line);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--hero-dim);
}

.hero-v2-main{
  position:relative;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  padding:56px 48px 0;
  align-items:start;
  max-width:1080px; margin:0 auto;
}
.hero-v2-copy .eyebrow{margin-bottom:16px; display:block;}
.hero-v2-copy h1{
  font-family:'Big Shoulders',sans-serif; font-weight:800;
  font-size:clamp(28px,4vw,46px); line-height:1.08; margin:0 0 20px; color:var(--hero-text);
}
.hero-v2-copy p{color:var(--hero-dim); max-width:420px; margin:0 0 28px; font-size:15px;}

.ticket-stub{
  position:relative;
  background:#fdfcfa;
  color:var(--text);
  padding:22px 22px 16px 30px;
  transform:rotate(-1.6deg);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  margin-top:-8px;
}
.ticket-stub::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:14px;
  background-image:radial-gradient(circle, var(--hero-bg) 3.5px, transparent 3.6px);
  background-size:14px 16px; background-position:left center;
}
.ticket-stub-row{
  display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--line);
  font-family:'Space Mono',monospace; font-size:13px; font-variant-numeric:tabular-nums;
}
.ticket-stub-row span:first-child{color:var(--text-dim); letter-spacing:0.04em;}
.ticket-stub-row span:last-child{font-weight:700;}
.ticket-stub-foot{padding-top:10px; font-size:11px; color:var(--steel); font-family:'Space Mono',monospace;}
.hero-v2-side{display:flex; flex-direction:column;}
.hero-tagline{
  position:relative; margin:24px 0 0; padding-left:16px; border-left:2px solid var(--red);
  font-size:13px; line-height:1.6; color:var(--hero-dim); max-width:280px;
}

.stamp{
  position:absolute; right:64px; bottom:-30px; width:112px; height:112px;
  border:2px solid rgba(199,42,56,0.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Big Shoulders',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(199,42,56,0.7); transform:rotate(-11deg);
}
.stamp::before{content:""; position:absolute; inset:6px; border:1px solid rgba(199,42,56,0.4); border-radius:50%;}

/* About */
.about-block{position:relative; display:grid; grid-template-columns:1.5fr 1fr; gap:48px; padding-top:8px;}
.about-block .about-copy p{font-size:18px; line-height:1.6; color:var(--text); max-width:520px; margin:0 0 18px;}
.about-block .about-copy p:first-child{font-size:22px; font-weight:500;}
.about-marginalia{
  position:relative; background:#fff; border-left:2px solid var(--red);
  padding:6px 0 6px 22px; margin-top:-34px; box-shadow:-1px 0 0 var(--line);
}
.about-marginalia .m-row{padding:12px 0; border-bottom:1px solid var(--line);}
.about-marginalia .m-row:last-child{border-bottom:none;}
.about-marginalia .m-label{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin-bottom:4px;}
.about-marginalia .m-value{font-family:'Space Mono',monospace; font-size:15px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;}
.about-stat{display:flex; align-items:center; gap:16px; margin-top:8px;}
.about-stat svg{width:34px; height:34px; color:var(--red); flex:none;}
.stat-mono{font-family:'Space Mono',monospace; font-weight:700; font-size:26px; color:var(--red);}
.stat-label{font-size:13px; color:var(--text-dim); margin-top:2px;}

/* Numbered material/spec cards */
.num-card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.num-card{background:#fff; padding:28px 24px;}
.num-card-photo{
  grid-column:1 / -1;
  min-height:440px;
  display:flex; align-items:flex-end;
  background:linear-gradient(200deg, rgba(22,22,26,0.15), rgba(22,22,26,0.55)), var(--ph-photo, repeating-linear-gradient(115deg, #d8d5cd 0 3px, #eae7e0 3px 18px));
  background-size:cover; background-position:center;
}
.num-card-photo span{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:#f3f2ee; padding:14px 20px; background:linear-gradient(0deg, rgba(22,22,26,0.7), transparent); width:100%;
}
.num-card .num{font-family:'Space Mono',monospace; font-weight:700; font-size:13px; color:var(--red); margin-bottom:14px;}
.num-card h3{font-family:'Big Shoulders',sans-serif; font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:0.01em; margin:0 0 6px;}
.num-card p{font-size:13px; color:var(--text-dim); margin:0;}

/* Ledger strip — dark contrast band */
.ledger-strip{position:relative; background:var(--hero-bg); border-top:2px solid var(--red); padding:48px 0 46px;}
.ledger-head{max-width:1080px; margin:0 auto 28px; padding:0 24px;}
.ledger-head .eyebrow{margin:0 0 10px; display:block; font-weight:400;}
.ledger-head p{color:var(--hero-dim); font-size:16px; max-width:520px; margin:0;}
.why-grid{
  max-width:1080px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.why-item{padding:0 32px; border-left:1px solid var(--hero-line);}
.why-item:first-child{border-left:none; padding-left:0;}
.why-item:nth-child(2){margin-top:22px;}
.why-item:nth-child(3){margin-top:8px;}
.why-item h3{
  font-family:'Big Shoulders',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:17px; color:var(--hero-text); margin:0 0 10px; letter-spacing:0.01em;
}
.why-item p{color:var(--hero-dim); font-size:14px; line-height:1.6; margin:0;}

/* Process flow */
.process-flow{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-top:12px;}
.process-step{position:relative; padding:0 32px 0 0;}
.process-step:nth-child(2){margin-top:38px;}
.process-step:nth-child(3){margin-top:8px;}
.process-step .p-num{font-family:'Space Mono',monospace; font-weight:700; font-size:13px; color:var(--red); margin-bottom:10px;}
.process-step h3{font-family:'Big Shoulders',sans-serif; font-weight:800; text-transform:uppercase; font-size:18px; margin:0 0 8px;}
.process-step p{font-size:14px; color:var(--text-dim); margin:0; max-width:280px; line-height:1.6;}
.process-step:not(:last-child)::after{
  content:"→"; position:absolute; right:6px; top:2px; color:var(--line); font-family:'Space Mono',monospace; font-size:18px;
}

/* Contact */
.contact-block{position:relative; display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start;}
.contact-cta h2{font-family:'Big Shoulders',sans-serif; font-weight:800; font-size:clamp(24px,3vw,34px); margin:14px 0 18px; text-transform:uppercase; line-height:1.1;}
.qr-row{display:flex; flex-wrap:wrap; gap:20px 36px; margin-top:28px;}
.qr-block{display:flex; align-items:center; gap:14px;}
.qr-block span{font-family:'Space Mono',monospace; font-size:11px; color:var(--steel); text-transform:uppercase; letter-spacing:0.06em; max-width:110px;}
.tear-line{border-top:1px dashed var(--line); margin:0 0 24px; position:relative;}
.tear-line::before{content:"✂"; position:absolute; left:-4px; top:-9px; font-size:12px; color:var(--steel); background:var(--bg); padding-right:6px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
.form-field{display:flex; flex-direction:column; gap:8px;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);}
.fill-input{
  border:none; border-bottom:1px solid var(--text); background:transparent; height:30px;
  font-family:'IBM Plex Sans',sans-serif; font-size:15px; color:var(--text); padding:0;
}
.fill-input:focus{outline:none; border-bottom:2px solid var(--red);}
.hp-field{position:absolute; left:-9999px;}
.form-success{margin-top:16px; font-size:14px; color:var(--red); font-weight:600;}

/* Footer */
.site-footer{background:var(--hero-bg); padding:32px 0;}
.site-footer-inner{
  max-width:1080px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;
}
.logo-badge{background:#fff; display:inline-flex; align-items:center; padding:6px 10px;}
.logo-badge img{height:28px; width:auto; display:block;}
.site-footer .f-legal{font-family:'Space Mono',monospace; font-size:11px; color:var(--hero-dim);}

/* Floating call button — appears once scrolled past the hero */
.fab-call{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:flex; align-items:center; gap:10px;
  background:var(--red); color:#fff; text-decoration:none;
  padding:15px 22px;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px;
  box-shadow:0 14px 32px rgba(22,22,26,0.35);
  opacity:0; transform:translateY(16px) scale(0.96); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.fab-call.is-shown{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.fab-call:hover{background:var(--red-hover);}
.fab-call svg{width:18px; height:18px; flex:none;}

/* Motion — orchestrated hero entrance + a deliberately varied scroll-reveal system.
   Never applied per-card/per-line; one or two reveal triggers per section, mixed
   directions (up/left/right/photo) so it reads as designed, not a templated
   fade-everything-in-on-scroll (see feedback_avoid_ai_generated_design). */
@media (prefers-reduced-motion: no-preference){
  /* Headline (LCP element) is never opacity:0 — only secondary hero chrome staggers in */
  .hero-fade-in{opacity:0; animation:heroFadeIn .45s ease forwards;}
  .hero-fade-in.d1{animation-delay:0s;}
  .hero-fade-in.d2{animation-delay:.12s;}
  @keyframes heroFadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .stamp{animation:stampIn .4s cubic-bezier(.2,1.4,.4,1) .3s both;}
  @keyframes stampIn{from{opacity:0; transform:rotate(-11deg) scale(1.6);} to{opacity:1; transform:rotate(-11deg) scale(1);}}

  /* Scroll reveal — toggled by IntersectionObserver in script.js.
     Note: a clip-path-based hidden state on the observed element itself makes
     Chromium's intersection ratio stick at 0 (clip-path shrinks the ratio
     calc even though isIntersecting still flips true, so with a non-zero
     threshold the callback never re-fires) — so "photo" uses opacity+scale
     like every other variant, not clip-path. */
  [data-reveal]{transition:opacity .6s ease, transform .6s ease;}
  [data-reveal="up"]{opacity:0; transform:translateY(20px);}
  [data-reveal="left"]{opacity:0; transform:translateX(-28px);}
  [data-reveal="right"]{opacity:0; transform:translateX(28px);}
  [data-reveal="photo"]{opacity:0; transform:scale(0.97);}
  [data-reveal].is-visible{opacity:1; transform:none;}

  /* Cards/steps cascade in together rather than each having its own observer trigger */
  .num-card-grid[data-reveal] .num-card,
  .num-card-grid[data-reveal] .num-card-photo{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .num-card-grid[data-reveal].is-visible .num-card,
  .num-card-grid[data-reveal].is-visible .num-card-photo{opacity:1; transform:none;}
  .num-card-grid[data-reveal] .num-card:nth-child(1){transition-delay:0s;}
  .num-card-grid[data-reveal] .num-card:nth-child(2){transition-delay:.05s;}
  .num-card-grid[data-reveal] .num-card:nth-child(3){transition-delay:.1s;}
  .num-card-grid[data-reveal] .num-card:nth-child(4){transition-delay:.15s;}
  .num-card-grid[data-reveal] .num-card:nth-child(5){transition-delay:.2s;}
  .num-card-grid[data-reveal] .num-card:nth-child(6){transition-delay:.25s;}
  .num-card-grid[data-reveal] .num-card-photo{transition-delay:.3s;}

  .process-flow[data-reveal] .process-step{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .process-flow[data-reveal].is-visible .process-step{opacity:1; transform:none;}
  .process-flow[data-reveal] .process-step:nth-child(1){transition-delay:0s;}
  .process-flow[data-reveal] .process-step:nth-child(2){transition-delay:.1s;}
  .process-flow[data-reveal] .process-step:nth-child(3){transition-delay:.2s;}
}

/* Responsive */
@media (max-width: 860px){
  .num-card-photo{min-height:260px;}
  .hero-v2-main{grid-template-columns:1fr; padding-top:40px;}
  .ticket-stub{margin-top:8px; transform:rotate(0deg);}
  .about-block, .contact-block{grid-template-columns:1fr;}
  .about-marginalia{margin-top:24px; border-left:2px solid var(--red);}
  .process-flow{grid-template-columns:1fr; gap:28px;}
  .process-step:nth-child(2), .process-step:nth-child(3){margin-top:0;}
  .process-step:not(:last-child)::after{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr; gap:20px;}
  .why-item{border-left:none; border-top:1px solid var(--hero-line); padding:20px 0 0;}
  .why-item:first-child{border-top:none; padding-top:0;}
  .why-item:nth-child(2), .why-item:nth-child(3){margin-top:0;}
  .site-header-inner{padding:0 16px; grid-template-columns:auto auto;}
  .header-nav{display:none;}
  .header-cta .btn-sm span.full-label{display:none;}
  .section-wrap{padding:64px 20px;}
}
@media (max-width: 480px){
  .header-cta{gap:6px;}
  .btn{padding:12px 16px; font-size:13px;}
  .fab-call span{display:none;}
  .fab-call{padding:16px; border-radius:50%;}
}
