/* ============================================================
   SUMMIT ROOFING — shared design system
   Industrial / architectural identity. Distinct from Meridian:
   condensed Oswald display type, warm near-black + safety orange,
   sharp corners, hazard stripes, blueprint grids, immersive tilt.
   Layout uses Tailwind (CDN); this file owns identity + motion.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand:#f97316; --brand-ink:#ea580c;
  --ink:#0b0a09; --panel:#17140f; --line:#2a2520;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,sans-serif; }
.font-display{ font-family:'Oswald',sans-serif; letter-spacing:.01em; }
.u-caps{ text-transform:uppercase; }
.u-track{ letter-spacing:.18em; }

/* ---- Blueprint grid + concrete texture for dark sections ---- */
.blueprint{
  background-image:
    linear-gradient(rgba(249,115,22,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.06) 1px, transparent 1px);
  background-size:46px 46px;
}
.noise::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- Hazard stripe divider ---- */
.hazard{
  height:10px;
  background:repeating-linear-gradient(-45deg, var(--brand) 0 16px, #111 16px 32px);
  opacity:.9;
}

/* ---- Numbered eyebrow label ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--brand); font-weight:600; }
.eyebrow::before{ content:attr(data-num); color:#57534e; font-variant-numeric:tabular-nums; }
.eyebrow .bar{ width:34px; height:2px; background:var(--brand); display:inline-block; }

/* ---- Buttons (sharp, industrial) ---- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.92rem;
  padding:.95rem 1.6rem; border-radius:4px; transition:transform .15s ease, background .2s, box-shadow .2s; cursor:pointer; border:0; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--brand); color:#0b0a09; box-shadow:0 10px 24px -8px rgba(249,115,22,.6); }
.btn--primary:hover{ background:#fb923c; transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(249,115,22,.7); }
.btn--ghost{ background:transparent; color:#f5f5f4; border:1px solid #3a332b; }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.btn--dark{ background:#0b0a09; color:#fff; }
.btn--dark:hover{ background:#1c1814; transform:translateY(-2px); }

/* ---- Immersive cards: tilt + glare + orange edge ---- */
.tilt-wrap{ perspective:1000px; }
.tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; will-change:transform; position:relative; overflow:hidden; }
.tilt .glare{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(249,115,22,.22), transparent 60%); }
.tilt:hover .glare{ opacity:1; }

.svc-card{ background:linear-gradient(180deg,#17140f,#121009); border:1px solid var(--line); border-top:3px solid #3a332b; border-radius:6px; }
.svc-card:hover{ border-top-color:var(--brand); box-shadow:0 26px 50px -20px rgba(0,0,0,.8); }
.svc-card .ico{ color:var(--brand); }

/* ---- Project tiles ---- */
.proj{ position:relative; overflow:hidden; border-radius:6px; border:1px solid var(--line); }
.proj .img{ transition:transform .6s cubic-bezier(.22,1,.36,1); }
.proj:hover .img{ transform:scale(1.07); }
.proj .cap{ transform:translateY(8px); opacity:.0; transition:.4s ease; }
.proj:hover .cap{ transform:none; opacity:1; }
.proj .tagline{ opacity:.85; }

/* ---- Reveal-on-scroll ---- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.from-l{ transform:translateX(-32px); } .reveal.from-l.in{ transform:none; }
.reveal.from-r{ transform:translateX(32px); } .reveal.from-r.in{ transform:none; }

/* ---- Marquee strip ---- */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:2.5rem; align-items:center; animation:marquee 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee__item{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#78716c; font-weight:600; display:inline-flex; align-items:center; gap:2.5rem; }

/* ---- Animated counter ---- */
.count{ font-variant-numeric:tabular-nums; }

/* ---- Floating hero accents ---- */
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.floaty{ animation:floaty 7s ease-in-out infinite; }

/* ============================================================
   Chatbot widget (markup injected by showcase-roofer.js)
   ============================================================ */
.cw{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:60; display:flex; flex-direction:column; align-items:flex-end; }
.cw-fab{ width:3.5rem; height:3.5rem; border-radius:6px; background:var(--brand); color:#0b0a09; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 14px 30px -8px rgba(249,115,22,.6);
  transition:transform .2s; position:relative; }
.cw-fab:hover{ transform:scale(1.06); }
.cw-fab .dot{ position:absolute; top:-5px; right:-5px; width:1.15rem; height:1.15rem; border-radius:999px; background:#22c55e; color:#fff;
  font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #0b0a09; }
.cw-panel{ margin-bottom:.75rem; width:92vw; max-width:23rem; height:520px; max-height:78vh; background:#1c1814; color:#f5f5f4;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right; animation:cwpop .22s ease; }
@keyframes cwpop{ from{ opacity:0; transform:translateY(12px) scale(.97);} to{ opacity:1; transform:none;} }
.cw-head{ background:#0b0a09; padding:.85rem 1rem; display:flex; align-items:center; gap:.75rem; border-bottom:1px solid var(--line); }
.cw-head .av{ width:2.25rem; height:2.25rem; border-radius:6px; background:var(--brand); color:#0b0a09; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.cw-log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:#17140f; }
.cw-row{ display:flex; } .cw-row.me{ justify-content:flex-end; }
.cw-msg{ max-width:82%; padding:.6rem .85rem; border-radius:12px; font-size:.875rem; line-height:1.5; }
.cw-msg.bot{ background:#26201a; border:1px solid var(--line); border-bottom-left-radius:3px; }
.cw-msg.me{ background:var(--brand); color:#0b0a09; font-weight:500; border-bottom-right-radius:3px; }
.cw-quick{ padding:0 1rem .5rem; display:flex; flex-wrap:wrap; gap:.4rem; background:#17140f; }
.cw-chip{ font-size:.72rem; font-weight:600; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line); background:#0b0a09; color:#d6d3d1; cursor:pointer; transition:.2s; }
.cw-chip:hover{ border-color:var(--brand); color:var(--brand); }
.cw-foot{ padding:.7rem; border-top:1px solid var(--line); display:flex; gap:.5rem; background:#1c1814; }
.cw-input{ flex:1; padding:.55rem .8rem; border-radius:6px; border:1px solid var(--line); background:#0b0a09; color:#f5f5f4; font-size:.875rem; outline:none; }
.cw-input:focus{ border-color:var(--brand); }
.cw-send{ width:2.5rem; height:2.5rem; border-radius:6px; background:var(--brand); color:#0b0a09; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cw-typing span{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#78716c; animation:cwbounce 1s infinite; }
.cw-typing span:nth-child(2){ animation-delay:.15s; } .cw-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes cwbounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5;} 40%{ transform:translateY(-5px); opacity:1;} }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track, .floaty, .cw-typing span{ animation:none !important; }
  html{ scroll-behavior:auto; }
}