/* THE CARPET STORE — cinematic scroll site */
:root{
  --cream:#f2ebdd;
  --cream-deep:#e9dfcc;
  --ink:#231d16;
  --red:#c8102e;
  --red-dark:#9c0c24;
  --gold:#b98a2f;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
::selection{background:var(--red);color:#fff}

/* a11y */
.skip{position:fixed;top:-60px;left:16px;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:0 0 10px 10px;text-decoration:none;font-weight:700;transition:top .25s}
.skip:focus{top:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:2px}

/* film grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:60;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* topbar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;mix-blend-mode:normal;font-size:12px;letter-spacing:.14em;font-weight:600;
  background:linear-gradient(to bottom,rgba(242,235,221,.92),rgba(242,235,221,0))}
.brand-mark{font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.02em;color:var(--red)}
.topbar-mid{opacity:.75}
.topbar-cta{color:#fff;background:var(--red);padding:8px 18px;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.06em}
.topbar-cta:hover{background:var(--red-dark)}

/* ===== cinematic scrub sections ===== */
.cinematic{height:520vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(20,12,6,.38) 100%)}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;pointer-events:none}
.line{position:absolute;opacity:0;will-change:opacity,transform}
.kicker{font-size:13px;letter-spacing:.34em;font-weight:800;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.9)}
.overlay .kicker{top:17vh;left:0;right:0}
.hero-title{font-family:var(--serif);font-weight:900;font-size:clamp(52px,9vw,128px);line-height:1;color:#fff;
  text-shadow:0 4px 34px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.85)}
.hero-sub{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,34px);color:#ffe9c8;
  top:63vh;left:0;right:0;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.big{font-family:var(--serif);font-weight:900;font-size:clamp(38px,6vw,86px);line-height:1.08;color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.82), 0 2px 5px rgba(0,0,0,.9)}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.25)}
.progress-fill{height:100%;width:0;background:var(--red)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;
  letter-spacing:.3em;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.8);transition:opacity .5s;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== flat panels ===== */
.panel{position:relative;z-index:2;background:var(--cream);padding:140px 8vw}
.panel .kicker{color:var(--red);text-shadow:none;font-size:12px}
.panel-title{font-family:var(--serif);font-weight:900;font-size:clamp(34px,4.6vw,64px);margin:18px 0 64px;max-width:16ch;line-height:1.06}
.products{background:linear-gradient(var(--cream),var(--cream-deep))}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fffdf8;border:1px solid rgba(35,29,22,.09);border-radius:18px;padding:34px 30px;
  box-shadow:0 10px 40px rgba(35,29,22,.06);transition:transform .45s ease,box-shadow .45s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(200,16,46,.13)}
.card-num{font-size:12px;font-weight:800;letter-spacing:.25em;color:var(--red)}
.card h3{font-family:var(--serif);font-size:28px;font-weight:700;margin:12px 0 10px}
.card p{font-size:15px;line-height:1.65;opacity:.8}
.brands{margin-top:64px;text-align:center;font-size:12px;letter-spacing:.22em;font-weight:700;opacity:.55;line-height:2.2}

/* process + stats */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:90px}
.step b{display:block;font-family:var(--serif);font-size:22px;margin-bottom:10px;color:var(--red)}
.step p{font-size:14.5px;line-height:1.6;opacity:.8}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;border-top:1px solid rgba(35,29,22,.12);padding-top:64px}
.stat-num{font-family:var(--serif);font-weight:900;font-size:clamp(44px,5vw,72px);color:var(--red);display:block}
.stat small{font-size:13px;letter-spacing:.18em;font-weight:700;opacity:.65;text-transform:uppercase}

/* contact */
.contact{background:linear-gradient(var(--cream-deep),var(--cream))}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px}
.contact h3{font-family:var(--serif);font-size:26px;margin:26px 0 16px}
.hours{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(35,29,22,.18);font-size:15px}
.contact-lines{line-height:2;font-size:15px}
.contact-lines a{color:var(--red);font-weight:700;text-decoration:none}
.map-link{display:inline-block;margin-top:18px;color:var(--ink);font-weight:800;letter-spacing:.06em;text-decoration:none;border-bottom:2px solid var(--red)}
form{display:grid;gap:14px}
input,select,textarea{font-family:var(--sans);font-size:15px;padding:15px 18px;border-radius:12px;border:1px solid rgba(35,29,22,.18);background:#fffdf8;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red)}
button{font-family:var(--sans);font-weight:800;letter-spacing:.08em;font-size:15px;color:#fff;background:var(--red);
  border:none;border-radius:999px;padding:17px 30px;cursor:pointer;transition:background .3s,transform .3s}
button:hover{background:var(--red-dark);transform:translateY(-2px)}
.form-note{font-size:13px;opacity:.7}

.footer{position:relative;z-index:2;display:flex;justify-content:space-between;padding:34px 8vw;background:var(--ink);color:#e8ddc8;font-size:13px;letter-spacing:.08em}

/* reveals — quiet, staggered, hand-tuned easing */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.product-grid .card:nth-child(2),.steps .step:nth-child(2),.stats .stat:nth-child(2){transition-delay:.12s}
.product-grid .card:nth-child(3),.steps .step:nth-child(3),.stats .stat:nth-child(3){transition-delay:.24s}
.product-grid .card:nth-child(4),.steps .step:nth-child(4),.stats .stat:nth-child(4){transition-delay:.36s}
.product-grid .card:nth-child(5){transition-delay:.12s}
.product-grid .card:nth-child(6){transition-delay:.24s}

/* mobile action bar */
.mobile-bar{display:none}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scroll-hint{animation:none}
  .reveal{transition:none;opacity:1;transform:none}
  .card,button{transition:none}
}

/* mobile — designed, not shrunk */
@media (max-width:820px){
  .topbar{padding:12px 18px;background:rgba(242,235,221,.96);backdrop-filter:blur(6px)}
  .topbar-mid,.topbar-cta{display:none}
  .brand-mark{font-size:18px}
  .cinematic{height:320vh}
  .big{font-size:clamp(30px,9.5vw,44px)}
  .hero-title{font-size:clamp(44px,13vw,72px)}
  .product-grid,.steps,.contact-grid{grid-template-columns:1fr;gap:18px}
  .stats{grid-template-columns:1fr 1fr;gap:34px}
  .card{padding:26px 24px}
  .panel{padding:76px 7vw 90px}
  .panel-title{margin-bottom:38px}
  .overlay .kicker{top:14vh}
  .hero-sub{top:64vh}
  .steps{margin-bottom:60px}
  input,select,textarea,button{padding:16px 18px;font-size:16px} /* no iOS zoom, big tap targets */
  .footer{flex-direction:column;gap:8px;text-align:center;padding-bottom:96px}
  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70}
  .mobile-bar a{flex:1;text-align:center;padding:17px 10px;font-weight:800;font-size:15px;
    letter-spacing:.04em;text-decoration:none;color:var(--ink);background:#fffdf8;
    border-top:1px solid rgba(35,29,22,.15)}
  .mobile-bar .mb-accent{background:var(--red);color:#fff}
}