/* ═══════════════════════════════════════════════════════════════════════
   Roofalo — Buffalo, NY
   Bison Black & Buffalo Gold · Archivo Black + Bitter.
   Black carries the gravity that earns trust; gold does the shouting so the
   black doesn't have to. Archivo Black for the mark and headlines, Bitter's
   slab for body — workwear typography for a workwear trade.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Bison Black & Buffalo Gold.
     Gold is a SIGNAL, not a colour scheme — fills and accents only, never body
     text on light. The discipline is 10% gold, not 30%; over-used it reads as
     caution tape. Ember is the text-safe deep gold for the rare gold-on-light. */
  --bison:#191614;       /* ground · mark · type   */
  --gold:#E29A21;        /* CTA · accent · signal  */
  --snow:#F6F7F8;        /* light ground           */
  --ash:#57534E;         /* support · borders      */
  --ember:#B4721A;       /* deep gold · text-safe  */

  --bg:var(--bison);
  --ink:var(--snow);
  --ink-dim:#A8A29E;
  --surface:#221E1C;     /* raised panels on the black ground */

  /* Archivo Black carries the mark and the headlines; Bitter's slab is workwear
     typography — crates, tools, signage — which fits the trade. Slabs are heavy
     in long copy, so body sizes run slightly larger with more leading to keep
     the texture readable. Archivo (not Black) handles tracked labels and UI. */
  --display:"Archivo Black",ui-sans-serif,system-ui,sans-serif;
  --body:"Bitter",Georgia,"Times New Roman",serif;
  --label:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --util-h:56px;
  --tick-h:30px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── shared type ─────────────────────────────────────────────────────── */
/* Sentence case, not caps — Archivo Black at display size is already dense;
   setting it uppercase turns headlines into a wall. */
.display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(46px,8vw,112px);line-height:.94;
  letter-spacing:-.025em;
}
.display--sm{font-size:clamp(32px,4.6vw,58px);letter-spacing:-.02em}
.eyebrow{
  font-family:var(--label);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  margin:0 0 14px;
}
/* Gold eyebrows are reserved for the hero and the closing CTA — the two places
   the page is actually asking for something. */
.hero__copy .eyebrow,.contact .eyebrow{color:var(--gold)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-dim);max-width:50ch;margin:18px 0 0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--label);font-weight:700;font-size:15px;
  letter-spacing:.01em;
  padding:15px 26px;border-radius:2px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--gold{background:var(--gold);color:#191614}
.btn--gold:hover{background:#f0ab33}
.btn--ghost{border-color:rgba(246,247,248,.28);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(246,247,248,.06)}
.btn--lg{padding:17px 32px;font-size:16px}

.section-head{margin:0 0 clamp(32px,4vw,56px)}

/* ── utility bar ─────────────────────────────────────────────────────── */
.util{
  position:fixed;inset:0 0 auto 0;z-index:70;height:var(--util-h);
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--util-h) + env(safe-area-inset-top));
  background:rgba(25,22,20,.82);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(246,247,248,.09);
}
.util__mark{
  font-family:var(--display);font-weight:400;font-size:21px;
  letter-spacing:-.02em;text-decoration:none;
  display:flex;align-items:baseline;gap:11px;margin-right:auto;
}
.util__mark span{
  font-family:var(--label);font-size:10px;font-weight:700;
  letter-spacing:.15em;color:var(--ink-dim);text-transform:uppercase;
}
.util__nav{display:flex;gap:26px}
.util__nav a{
  font-family:var(--label);font-size:14px;font-weight:600;color:var(--ink-dim);text-decoration:none;
  transition:color .18s ease;
}
.util__nav a:hover{color:var(--ink)}
.util__tel{
  background:var(--gold);color:var(--bison);text-decoration:none;
  font-family:var(--label);font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:2px;
}

/* ── storm ticker ────────────────────────────────────────────────────── */
.ticker{
  position:fixed;z-index:69;left:0;right:0;
  top:calc(var(--util-h) + env(safe-area-inset-top));
  height:var(--tick-h);overflow:hidden;
  background:var(--ash);
  border-bottom:1px solid rgba(0,0,0,.25);
}
.ticker__track{
  display:flex;align-items:center;gap:0;height:100%;width:max-content;
  animation:tick 42s linear infinite;
}
.ticker__track span{
  font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(246,247,248,.78);
  padding:0 20px;white-space:nowrap;
}
.ticker__track b{color:var(--ink);font-weight:700}
.ticker__track i{color:rgba(246,247,248,.3);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  /* Scroll distance the scrub consumes. Height is set in JS from the clip. */
  position:relative;
  margin-top:calc(var(--util-h) + var(--tick-h) + env(safe-area-inset-top));
}
.hero__stage{
  position:sticky;
  top:calc(var(--util-h) + var(--tick-h) + env(safe-area-inset-top));
  height:calc(100svh - var(--util-h) - var(--tick-h) - env(safe-area-inset-top));
  overflow:hidden;background:#0f0d0c;
}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.hero__poster{z-index:1}
.hero__video{z-index:2;opacity:0;transition:opacity .4s ease}
.hero__video.is-live{opacity:1}
.hero__scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to top,rgba(25,22,20,.94) 0%,rgba(25,22,20,.55) 34%,rgba(25,22,20,0) 66%),
    linear-gradient(to right,rgba(25,22,20,.72) 0%,rgba(25,22,20,0) 55%);
}
.hero__copy{
  position:absolute;z-index:4;left:var(--pad);right:var(--pad);
  bottom:calc(76px + env(safe-area-inset-bottom));
  max-width:min(760px,90vw);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* before/after progress rail */
.hero__state{
  position:absolute;z-index:4;left:var(--pad);right:var(--pad);
  bottom:calc(30px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);
}
.hero__rail{
  flex:1;height:1px;background:rgba(246,247,248,.22);position:relative;max-width:340px;
}
.hero__rail i{
  position:absolute;inset:0 auto 0 0;width:0%;background:var(--gold);
  display:block;transition:width .1s linear;
}
.hero__state-b{color:var(--gold)}

/* ── promise ─────────────────────────────────────────────────────────── */
.promise{
  padding:clamp(80px,12vw,160px) var(--pad);
  max-width:var(--maxw);margin:0 auto;text-align:center;
}
.promise__line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.4vw,54px);line-height:1.12;letter-spacing:-.022em;margin:0;
}
.promise__line em{color:var(--gold);font-style:normal}
.promise__sub{color:var(--ink-dim);margin:24px auto 0;max-width:56ch}

/* ── testimonials marquee ────────────────────────────────────────────── */
.voices{padding:clamp(60px,8vw,110px) 0;border-top:1px solid rgba(246,247,248,.09)}
.voices .section-head{padding:0 var(--pad);max-width:var(--maxw);margin-inline:auto}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:20px;width:max-content;animation:slide 64s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.quote{
  width:min(400px,80vw);flex:0 0 auto;
  background:var(--surface);border:1px solid rgba(246,247,248,.09);
  border-radius:3px;padding:28px;
}
.quote p{margin:0 0 20px;font-size:16px;line-height:1.62}
.quote footer{display:flex;flex-direction:column;gap:3px}
.quote cite{font-style:normal;font-family:var(--label);font-weight:700;font-size:14px}
.quote small{font-family:var(--label);font-weight:600;font-size:11px;
             letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

/* ── services ────────────────────────────────────────────────────────── */
.services{padding:clamp(70px,9vw,130px) var(--pad);max-width:var(--maxw);margin:0 auto;
          border-top:1px solid rgba(246,247,248,.09)}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;
      grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
      background:rgba(246,247,248,.09);border:1px solid rgba(246,247,248,.09)}
.card{background:var(--bg);padding:34px 30px 30px}
.card__k{font-family:var(--label);font-weight:700;font-size:11px;color:var(--ash);
         letter-spacing:.16em;margin:0 0 18px}
.card h3{font-family:var(--display);font-weight:400;
         font-size:23px;letter-spacing:-.018em;line-height:1.15;margin:0 0 12px}
.card p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}
.card__meta{margin-top:18px !important;font-family:var(--label);font-weight:600;
            font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}

/* ── work ────────────────────────────────────────────────────────────── */
.work{padding:clamp(70px,9vw,130px) var(--pad);max-width:var(--maxw);margin:0 auto;
      border-top:1px solid rgba(246,247,248,.09)}
.work__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.shot{position:relative;overflow:hidden;border-radius:3px;background:var(--ash);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:16px 18px;
  background:linear-gradient(to top,rgba(25,22,20,.94),transparent);
  font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;
}

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq{padding:clamp(70px,9vw,130px) var(--pad);max-width:var(--maxw);margin:0 auto;
     border-top:1px solid rgba(246,247,248,.09)}
.faq__list{border-top:1px solid rgba(246,247,248,.14)}
.qa{border-bottom:1px solid rgba(246,247,248,.14)}
.qa summary{
  display:flex;align-items:flex-start;gap:20px;
  padding:26px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.1vw,26px);line-height:1.24;letter-spacing:-.018em;
  transition:color .18s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
/* The marker is the only gold in this section — it marks state, which is a signal. */
.qa summary::after{
  content:"";flex:0 0 auto;width:15px;height:15px;margin-top:.35em;
  background:var(--gold);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
  transition:transform .22s cubic-bezier(.3,.7,.3,1);
}
.qa[open] summary::after{transform:rotate(135deg)}
.qa summary:hover{color:var(--gold)}
.qa__body{padding:0 0 28px;max-width:66ch}
.qa__body p{margin:0 0 14px;color:var(--ink-dim);font-size:16px;line-height:1.7}
.qa__body p:last-child{margin-bottom:0}
.qa__body strong{color:var(--ink);font-weight:700}
.qa__body em{color:var(--ink);font-style:italic}

/* ── contact ─────────────────────────────────────────────────────────── */
.contact{padding:clamp(80px,11vw,150px) var(--pad);border-top:1px solid rgba(246,247,248,.09)}
.contact__inner{max-width:var(--maxw);margin:0 auto}
.contact__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.contact__facts{
  display:grid;gap:1px;margin:56px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:rgba(246,247,248,.09);border:1px solid rgba(246,247,248,.09);
}
.contact__facts>div{background:var(--bg);padding:22px 24px}
.contact__facts dt{font-family:var(--label);font-weight:700;font-size:11px;
                   letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 7px}
.contact__facts dd{margin:0;font-size:15px}

.foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px var(--pad);border-top:1px solid rgba(246,247,248,.09);
  font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}
.foot a{text-decoration:none}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:860px){
  .util__nav{display:none}
  .util__mark span{display:none}
  .hero__cta .btn{flex:1 1 100%}

  /* House above the words. The film occupies the top band; the copy sits on solid
     ground beneath it. Overlaying type on a portrait frame put the body copy across
     the porch and fence — busy, and it buried the thing being sold. */
  .hero__poster,.hero__video{height:54%;bottom:auto}
  .hero__scrim{
    inset:0 0 46% 0;
    background:linear-gradient(to top,rgba(25,22,20,.92) 0%,rgba(25,22,20,.35) 42%,
                               rgba(25,22,20,0) 72%);
  }
  .hero__copy{
    top:calc(54% + 12px);bottom:auto;
    display:flex;flex-direction:column;
  }
  .hero__copy .display{font-size:clamp(38px,11.5vw,54px)}
  .hero__copy .lede{font-size:16px;margin-top:10px}
  .hero__cta{margin-top:18px;gap:10px}
  /* The phone number is pinned in the utility bar at every scroll position, so a
     second dial button here is redundant — and the space it frees is what keeps
     the primary CTA clear of the progress rail. */
  .hero__cta .btn--ghost{display:none}
}
@media (max-width:860px) and (max-height:700px){
  /* Short phones: give the copy the room it needs rather than clipping the CTAs. */
  .hero__poster,.hero__video{height:44%}
  .hero__scrim{inset:0 0 56% 0}
  .hero__copy{top:calc(44% - 30px)}
  .hero__copy .display{font-size:clamp(34px,10.5vw,46px)}
}
@media (max-width:520px){
  .hero__state-a,.hero__state-b{font-size:9px}
}

/* ── reduced motion: no scrub, no marquees — the after-shot, held ────── */
@media (prefers-reduced-motion:reduce){
  .ticker__track,.marquee__track{animation:none}
  .hero{height:auto !important}
  .hero__stage{position:relative;top:0}
  .hero__video{display:none}
  .hero__state{display:none}
  .shot img{transition:none}
}