/* ═══════════════════════════════════════════════════════════════
   Oscar Handyman, Westchester County, NY
   Design thesis: the flyer IS the brand. The hero is a flyer pinned
   to a utility wall; its tear-off tabs are the tap-to-call buttons.
   Below the fold the page goes quiet so it reads trustworthy.
   Palette is taken from real neon flyer cardstock, not contractor blue.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --wall:#33372F;        /* weathered utility wall / pole */
  --wall-deep:#23261F;
  --stock:#F6F0DC;       /* warm flyer cardstock */
  --stock-alt:#EEE6CD;
  --ink:#191A16;         /* photocopier black, slightly warm */
  --ink-soft:#5A5D50;
  --rule:rgba(25,26,22,.16);
  --highlighter:#EDE24B; /* neon flyer stock, the signature */
  --tape:#D9481E;        /* safety orange, reserved for CALL */
  --verified:#4B7A4E;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;

  --pad:clamp(1.25rem,5vw,3rem);
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  background:var(--stock);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--highlighter);
  color:var(--ink);padding:.7rem 1.1rem;font-family:var(--display);font-weight:700}
.skip:focus{left:.5rem;top:.5rem}

:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--highlighter);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:640px}

/* ── shared type ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:.71rem;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.4rem}
.eyebrow--dark{color:var(--ink-soft)}
.h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,2.7rem);
  letter-spacing:-.028em;line-height:1.05;margin:0 0 .7rem}
.sect-lead{
  font-size:clamp(1.05rem,1rem + .45vw,1.25rem);
  color:var(--ink-soft);max-width:52ch;margin:0 0 2.4rem}
.fine{font-family:var(--display);font-size:.82rem;color:var(--ink-soft);margin:1.6rem 0 0}
.fine code{background:rgba(25,26,22,.07);padding:.1em .4em;border-radius:3px;font-size:.92em}

/* ═══ HERO, the wall ═══════════════════════════════════════════ */
.wall{
  position:relative;background:var(--wall);color:var(--stock);
  padding:clamp(2.5rem,7vw,5rem) var(--pad) clamp(3rem,7vw,5.5rem);
  overflow:hidden}
.wall-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 23px);}

/* ── the flyer ── */
.flyer{
  position:relative;z-index:1;
  max-width:660px;margin:0 auto;
  background:var(--stock);color:var(--ink);
  padding:clamp(1.9rem,5vw,3.1rem) clamp(1.4rem,4.4vw,3.1rem) 0;
  transform:rotate(-.55deg);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
             0 22px 44px -14px rgba(0,0,0,.55),
             0 3px 10px rgba(0,0,0,.3);
}
.flyer::before{ /* paper tooth */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

.staple{
  position:absolute;top:11px;width:19px;height:6px;
  background:linear-gradient(#c9c9c4,#8d8f88 55%,#6a6c66);
  box-shadow:0 1px 2px rgba(0,0,0,.45);border-radius:1px;z-index:3}
.staple--l{left:26px;transform:rotate(-7deg)}
.staple--r{right:26px;transform:rotate(5deg)}

.flyer .eyebrow{margin-bottom:1rem}
.flyer-name{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.7rem,12.5vw,6.6rem);
  line-height:.82;letter-spacing:-.05em;
  margin:0 0 1.1rem;text-transform:uppercase}
.flyer-name-2{
  display:inline-block;
  background:var(--highlighter);
  padding:0 .12em .04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{
  font-size:clamp(1.2rem,1rem + 1.35vw,1.72rem);
  line-height:1.28;margin:0 0 1rem;max-width:22ch}
.pitch{
  color:var(--ink-soft);max-width:44ch;margin:0 0 1.9rem;
  padding-top:1.1rem;border-top:1px solid var(--rule)}

/* ── buttons ── */
.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 2.3rem}
.btn{
  font-family:var(--display);font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;
  border:2px solid var(--ink);transition:transform .14s,background .14s,color .14s}
.btn:hover{transform:translateY(-2px)}
.btn--call{
  background:var(--tape);color:var(--stock);border-color:var(--tape);
  gap:.6rem;padding:.85rem 1.3rem;font-size:1.05rem;letter-spacing:-.01em}
.btn--call .btn-k{
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;opacity:.82}
.btn--call .btn-n{font-weight:800;font-variant-numeric:tabular-nums}
.btn--text{background:transparent;color:var(--ink);padding:.85rem 1.3rem;font-size:1rem}
.btn--text:hover{background:var(--ink);color:var(--stock)}
.btn--send{
  background:var(--ink);color:var(--stock);border-color:var(--ink);
  padding:.9rem 1.6rem;font-size:1.02rem;cursor:pointer;width:100%;justify-content:center}
.btn--send:hover{background:var(--tape);border-color:var(--tape)}

/* ═══ THE SIGNATURE: tear-off tabs ═════════════════════════════ */
.tabs{
  display:flex;position:relative;
  margin:0 calc(clamp(1.4rem,4.4vw,3.1rem) * -1);
  padding-top:1px}
.tabs-perf{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 10px)}
.tab{
  flex:1 1 0;min-width:0;height:118px;
  display:flex;align-items:center;justify-content:center;
  background:var(--stock);
  border-left:1px dashed rgba(25,26,22,.28);
  font-family:var(--display);font-weight:700;font-size:.79rem;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  text-decoration:none;color:var(--ink);
  transform-origin:50% 0;
  transition:transform .24s cubic-bezier(.3,1.4,.5,1),background .16s,box-shadow .24s;
  will-change:transform}
.tab span{writing-mode:vertical-rl;text-orientation:mixed}
.tab:first-of-type{border-left:0}
.tab:hover,.tab:focus-visible{
  background:var(--highlighter);
  transform:translateY(7px) rotate(-2.4deg);
  box-shadow:0 10px 18px -8px rgba(0,0,0,.5);
  z-index:2;position:relative}
.tab.is-torn{
  transform:translateY(150px) rotate(-17deg);opacity:0;
  transition:transform .5s cubic-bezier(.4,.1,.6,1),opacity .5s}
.tabs-hint{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--highlighter);
  text-align:center;margin:1.3rem 0 0}

.scan-note{
  position:relative;z-index:1;max-width:660px;margin:1.7rem auto 0;
  background:var(--highlighter);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.88rem;
  padding:.75rem 1.1rem;text-align:center}

/* ═══ SHEETS (page body) ═══════════════════════════════════════ */
.sheet{padding:clamp(3.2rem,8vw,5.6rem) 0;background:var(--stock)}
.sheet--alt{background:var(--stock-alt)}
.sheet--form{background:var(--stock-alt);border-top:1px solid var(--rule)}

/* ── what I fix ── */
.fix-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  border-top:1px solid var(--rule)}
.fix-list li{
  padding:1.1rem 1.3rem 1.2rem 0;
  border-bottom:1px solid var(--rule)}
.fix-list b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.01em;margin-bottom:.15rem}
.fix-list span{display:block;color:var(--ink-soft);font-size:.96rem;line-height:1.5}

/* ── how it goes ── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{position:relative;padding-top:.6rem;border-top:3px solid var(--ink)}
.step-n{
  display:inline-block;font-family:var(--display);font-weight:900;
  font-size:2.5rem;line-height:1;letter-spacing:-.05em;
  color:var(--tape);margin-bottom:.35rem}
.steps h3{
  font-family:var(--display);font-weight:800;font-size:1.16rem;
  letter-spacing:-.02em;margin:0 0 .45rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.99rem}

/* ── gallery ── */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.shot{margin:0}
.shot-img{
  aspect-ratio:4/3;background:var(--stock-alt);
  border:1px dashed rgba(25,26,22,.3);
  background-image:repeating-linear-gradient(45deg,rgba(25,26,22,.045) 0 9px,transparent 9px 18px)}
.sheet--alt .shot-img{background-color:var(--stock)}
.shot figcaption{
  font-family:var(--display);font-size:.73rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem}

/* ── towns ── */
.towns{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.towns li{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  padding:.42rem .78rem;border:1px solid var(--rule);background:var(--stock)}

/* ── empty state ── */
.empty{border-left:4px solid var(--highlighter);padding-left:clamp(1rem,3vw,1.8rem)}

/* ── form ── */
.form{margin-top:.6rem}
.field{margin-bottom:1.15rem}
.field label{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.88rem;margin-bottom:.35rem}
.field .hint{font-weight:400;color:var(--ink-soft);font-size:.82rem;letter-spacing:0}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--stock);border:2px solid var(--ink);
  padding:.68rem .8rem;border-radius:0}
.field textarea{resize:vertical;line-height:1.5}
.field input[type=file]{
  font-family:var(--display);font-size:.88rem;padding:.6rem;
  border-style:dashed;background:transparent}
.field input:focus,.field textarea:focus{outline:3px solid var(--highlighter);outline-offset:1px}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--tape)}
.form-note{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  margin:.9rem 0 0;min-height:1.3em}
.form-note[data-state=error]{color:var(--tape)}
.form-note[data-state=ok]{color:var(--verified)}

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.wall--foot{padding-block:clamp(2.6rem,6vw,4rem) 1.6rem}
.foot-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  position:relative;z-index:1}
.foot-name{
  font-family:var(--display);font-weight:900;font-size:1.35rem;
  letter-spacing:-.03em;text-transform:uppercase;margin:0 0 .5rem}
.foot-h{
  font-family:var(--display);font-weight:600;font-size:.71rem;
  letter-spacing:.17em;text-transform:uppercase;
  color:rgba(246,240,220,.6);margin:0 0 .7rem}
.foot-line{margin:0 0 .35rem;font-size:.96rem;color:rgba(246,240,220,.9)}
.foot-line--muted{color:rgba(246,240,220,.58);font-size:.89rem;line-height:1.5}
.foot-line a{text-decoration-thickness:1px;text-underline-offset:3px}
.foot-fine{
  position:relative;z-index:1;max-width:var(--maxw);
  margin:2.4rem auto 0;padding-inline:var(--pad);
  font-family:var(--display);font-size:.73rem;letter-spacing:.06em;
  color:rgba(246,240,220,.45)}

/* ═══ STICKY CALL BAR (mobile) ═════════════════════════════════ */
.callbar{display:none}
@media (max-width:720px){
  .callbar{
    display:grid;grid-template-columns:1.35fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    border-top:2px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom)}
  .callbar-btn{
    font-family:var(--display);font-weight:800;font-size:1rem;
    text-align:center;text-decoration:none;padding:.95rem .5rem}
  .callbar-btn--call{background:var(--tape);color:var(--stock)}
  .callbar-btn--text{background:var(--highlighter);color:var(--ink)}
  body{padding-bottom:4.2rem}
}

/* ═══ DEMO MODE ════════════════════════════════════════════════
   Unverified content is VISIBLY unverified. Nothing about Oscar is
   invented, every gap is tagged so it can't ship by accident, and
   so the pitch can point at exactly what he needs to supply.
   ══════════════════════════════════════════════════════════════ */
.demo-toggle{
  position:fixed;right:.85rem;bottom:.85rem;z-index:50;
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  background:var(--ink);color:var(--stock);border:2px solid var(--highlighter);
  font-family:var(--display);font-weight:600;font-size:.78rem;
  padding:.55rem .8rem;border-radius:999px}
.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--highlighter)}
.demo-label b{color:var(--highlighter)}
[data-demo=off] .demo-dot{background:var(--ink-soft)}
[data-demo=off] .demo-label b{color:var(--ink-soft)}
@media (max-width:720px){.demo-toggle{bottom:4.8rem}}

[data-demo=on] [data-needs]{
  position:relative;
  outline:2px dashed var(--highlighter);outline-offset:5px}
[data-demo=on] [data-needs]::after{
  content:"needs oscar: " attr(data-needs);
  position:absolute;bottom:100%;left:0;margin-bottom:4px;z-index:5;
  background:var(--highlighter);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.16rem .42rem;pointer-events:none;white-space:nowrap}
[data-demo=on] .wall [data-needs]{outline-color:var(--highlighter)}

/* ═══ MOTION / RESPONSIVE ══════════════════════════════════════ */
@media (max-width:560px){
  .tab:nth-of-type(n+6){display:none}
  .tab{height:96px}
  .flyer{transform:rotate(-.35deg)}
  .staple--l{left:16px}.staple--r{right:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .tab:hover,.tab:focus-visible{transform:none}
  .tab.is-torn{transform:none;opacity:.35}
  .btn:hover{transform:none}
}
@media print{
  .callbar,.demo-toggle,.skip{display:none}
  .wall{background:#fff;color:#000}
}