/* ============================================================
   REVLINE GRAPHICS — CUT-FILE DESIGN SYSTEM
   The site is a cut file: white sections are backing paper on a
   cutting mat, black sections are the vinyl, red is the plot path.
   Display: Big Shoulders · Body: Barlow · Annotations: Martian Mono
   ============================================================ */

:root{
  /* surfaces */
  --vinyl: oklch(0.19 0.006 270);          /* the black vinyl */
  --vinyl-2: oklch(0.23 0.008 270);        /* raised vinyl panel */
  --paper: oklch(0.985 0.002 106);         /* backing paper */
  --paper-2: oklch(0.955 0.003 106);       /* pressed paper */
  --silver: var(--paper-2);                /* legacy alias (subpages) */
  --ink: oklch(0.20 0.005 270);
  /* the plot */
  --red: oklch(0.60 0.20 22);              /* #E63946 family */
  --red-btn: oklch(0.54 0.20 23);          /* AA white-on-red for button text */
  --red-deep: oklch(0.50 0.19 24);         /* AA text red on paper */
  --red-hot: oklch(0.66 0.21 22);          /* large type on vinyl */
  /* ink */
  --ink-soft: oklch(0.38 0.006 270);
  --ann: oklch(0.45 0.008 270);            /* annotations on paper (AA) */
  --inv: oklch(0.94 0.003 106);            /* text on vinyl */
  --inv-soft: oklch(0.76 0.006 270);       /* secondary on vinyl (AA) */
  --ann-inv: oklch(0.72 0.008 270);        /* annotations on vinyl */
  /* lines */
  --line: oklch(0.87 0.004 106);
  --line-inv: oklch(0.32 0.008 270);
  /* type */
  --disp: "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", sans-serif;
  --mono: "Martian Mono", "Courier New", monospace;
  /* rhythm */
  --wrap: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.4rem);
  --r: 3px;
  /* z scale */
  --z-nav: 40; --z-sticky: 30; --z-menu: 50;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body); color:var(--ink); background:var(--paper);
  font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

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

/* ---------- annotation voice (title-block system) ---------- */
.kick{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.66rem;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ann);
}
.kick::before{content:"";width:22px;height:1px;background:var(--red);flex:none}

/* ---------- type scale ---------- */
h1{
  font-family:var(--disp); font-weight:800; line-height:.95;
  font-size:clamp(2.6rem, 7.2vw, 5.2rem);
  letter-spacing:.005em; text-transform:uppercase;
}
h2{
  font-family:var(--disp); font-weight:800; line-height:1.02;
  font-size:clamp(1.9rem, 4vw, 3rem);
  letter-spacing:.008em; text-transform:uppercase;
}
h3{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing:.02em; text-transform:uppercase;
}
h4{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ann-inv);
}
/* weeded word: outlined letters, as if weeded off the backing */
.weed{color:transparent;-webkit-text-stroke:2px var(--red-hot)}
@supports not (-webkit-text-stroke:2px red){.weed{color:var(--red-hot)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.02rem;line-height:1;
  padding:1rem 1.7rem .95rem;border-radius:var(--r);
  border:0;cursor:pointer;
  transition:transform .18s cubic-bezier(.19,1,.22,1), box-shadow .18s cubic-bezier(.19,1,.22,1), background .18s;
}
.btn-red{
  background:var(--red-btn);color:#fff;
  box-shadow:0 1px 0 oklch(0.42 0.17 24), 4px 4px 0 rgba(15,15,18,.18);
}
.btn-red:hover{transform:translate(-1px,-1px);box-shadow:0 1px 0 oklch(0.42 0.17 24), 6px 6px 0 rgba(15,15,18,.22);background:var(--red)}
.btn-red:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(15,15,18,.2)}
.btn-ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:rgba(127,127,127,.12)}

/* ---------- NAV ---------- */
header.nav, .nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:var(--vinyl);color:var(--inv);
  border-bottom:1px solid var(--line-inv);
}
.nav .bar{display:flex;align-items:center;gap:1.4rem;padding-block:.7rem}
.logo-img{height:30px;width:auto;display:block;border-radius:4px}
.navmenu{display:flex;gap:.15rem;margin-left:.4rem}
.navmenu a{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--inv-soft);padding:.55rem .7rem;border-radius:3px;
  transition:color .15s,background .15s;
}
.navmenu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-right{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.nav-right a.tel{font-family:var(--disp);font-weight:700;font-size:1.08rem;letter-spacing:.03em;color:#fff}
.nav-right a.tel:hover{color:var(--red-hot)}
.nav-right .btn{padding:.72rem 1.15rem .66rem;font-size:.9rem}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{width:22px;height:2px;background:#fff}

/* ---------- HERO (vinyl surface; the form is a work order) ---------- */
.hero{background:var(--vinyl);color:var(--inv);position:relative;overflow:clip}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero .wrap{
  position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3rem,7vw,5.2rem);
}
.hero h1{margin:1rem 0 1.1rem;max-width:12ch}
.hero .sub{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--inv-soft);max-width:46ch;margin-bottom:1.4rem}
.hero ul{display:grid;gap:.55rem;margin-bottom:1.4rem}
.hero ul li{display:flex;gap:.6rem;align-items:center;font-weight:500;color:var(--inv)}
.hero ul svg{color:var(--red-hot);flex:none}
.urgency{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ann-inv);
  border:1px dashed var(--line-inv);border-radius:100px;padding:.42rem .85rem;
}
.urgency .dot{width:7px;height:7px;border-radius:50%;background:var(--red-hot);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.66 0.21 22 / .5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.social{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--inv-soft)}
.stars{color:var(--red-hot);letter-spacing:.12em}

/* the animated cut path in the hero */
.cutpath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cutpath rect{
  fill:none;stroke:var(--red);stroke-width:1.5;opacity:.5;
  stroke-dasharray:7 6;
}
.js .cutpath rect{
  stroke-dasharray:3400;stroke-dashoffset:3400;
  animation:plot 2.8s cubic-bezier(.45,0,.2,1) .25s forwards;
}
@keyframes plot{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .js .cutpath rect{animation:none;stroke-dasharray:7 6;stroke-dashoffset:0}
  .urgency .dot{animation:none}
}

/* the work-order form card */
.formcard{
  background:var(--paper);color:var(--ink);
  border-radius:8px;padding:1.4rem 1.4rem 1.2rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.25);
  position:relative;
  outline:1.5px dashed rgba(255,255,255,.45); outline-offset:6px;
}
.formcard::before{
  content:"WORK ORDER · FREE QUOTE · NO OBLIGATION";
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;
  color:var(--ann);border-bottom:1px solid var(--line);
  padding-bottom:.6rem;margin-bottom:.85rem;
}
.formcard h2{font-size:1.55rem;letter-spacing:.01em;margin-bottom:.1rem}
.fc-sub{font-size:.86rem;color:var(--ink-soft);margin-bottom:.9rem}
.formcard form{display:grid;gap:.75rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.f label{
  display:block;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ann);margin-bottom:.35rem;
}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:.98rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:.66rem .75rem;transition:border-color .15s, box-shadow .15s;
}
.f input[type="file"]{padding:.5rem;font-size:.85rem;background:var(--paper-2)}
.f textarea{min-height:70px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px oklch(0.60 0.20 22 / .18);
}
.f input::placeholder,.f textarea::placeholder{color:var(--ann)}
.formcard .btn{width:100%}
.fc-fine{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.78rem;color:var(--ann);text-align:center}

/* ---------- trust → spec strip ---------- */
.trust{background:var(--paper);border-bottom:1px solid var(--line)}
.trust .wrap{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  padding-block:.8rem;
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ann);
}
.trust b{color:var(--ink);font-weight:700}

/* ---------- section block ---------- */
.blk{padding-block:clamp(3rem,7vw,5.2rem)}
.blk .wrap > .head{max-width:62ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.head h2{margin:.7rem 0 .6rem}
.head p{color:var(--ink-soft);font-size:1.04rem;max-width:56ch}

/* ---------- services: the sticker sheet ---------- */
.sheet{display:flex;flex-wrap:wrap;gap:1.05rem}
.sticker{
  position:relative;flex:1 1 240px;
  background:#fff;border-radius:10px;padding:1.3rem 1.35rem 1.2rem;
  border:1px solid var(--line);
  outline:1.5px dashed var(--red);outline-offset:4px;
  transition:transform .2s cubic-bezier(.19,1,.22,1), box-shadow .2s;
}
.sticker:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:6px 8px 0 rgba(15,15,18,.08)}
.sticker--wide{flex:2 1 380px}
.sticker h3{margin:.15rem 2rem .3rem 0}
.sticker p{font-size:.94rem;color:var(--ink-soft);max-width:46ch}
.sticker .kick{margin-bottom:.35rem}
.sticker .go{
  position:absolute;top:1.05rem;right:1.1rem;
  font-family:var(--mono);font-size:.85rem;color:var(--red-deep);
}

/* ---------- gallery: plot proofs ---------- */
.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:1rem}
.frame{
  position:relative;overflow:hidden;border-radius:6px;background:
    linear-gradient(180deg,rgba(16,16,20,0) 40%,rgba(16,16,20,.82) 100%),
    var(--img,linear-gradient(135deg,oklch(0.3 0.01 270),oklch(0.2 0.01 270)));
  background-size:cover;background-position:center;
}
.frame::before,.frame::after{content:"";position:absolute;width:12px;height:12px;opacity:.95;z-index:2}
.frame::before{top:8px;left:8px;border-top:1.5px solid #fff;border-left:1.5px solid #fff}
.frame::after{bottom:8px;right:8px;border-bottom:1.5px solid #fff;border-right:1.5px solid #fff}
.frame .fig{
  position:absolute;left:.9rem;bottom:.75rem;z-index:2;color:#fff;
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;
}
.g1{grid-column:span 4;grid-row:span 2}.g2{grid-column:span 2}.g3{grid-column:span 2}
.g4{grid-column:span 2}.g5{grid-column:span 2}.g6{grid-column:span 2}
.work-cta,.center-cta{text-align:center;margin-top:2.2rem}

/* ---------- steps on vinyl ---------- */
.steps-sec{background:var(--vinyl);color:var(--inv)}
.steps-sec .head h2{color:#fff}
.steps-sec .head p{color:var(--inv-soft)}
.steps-sec .kick{color:var(--ann-inv)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.step{
  background:var(--vinyl-2);border:1px solid var(--line-inv);border-radius:8px;
  padding:1.45rem 1.35rem;position:relative;
}
.step .n{
  font-family:var(--disp);font-weight:800;font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--red-hot);
  margin-bottom:.65rem;
}
@supports not (-webkit-text-stroke:1px red){.step .n{color:var(--red-hot)}}
.step h3{color:#fff;margin-bottom:.4rem}
.step p{color:var(--inv-soft);font-size:.95rem}
.step:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-1.1rem;width:1.1rem;height:1px;
  background:repeating-linear-gradient(90deg,var(--red-hot) 0 5px,transparent 5px 9px);
}

/* ---------- straight-talk cards ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem}
.tcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.35rem 1.35rem 1.15rem}
.tcard p{font-size:1rem;color:var(--ink)}
.tcard p a{color:var(--red-deep);font-weight:600}
.tcard cite{
  display:block;margin-top:.8rem;font-style:normal;
  font-family:var(--mono);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ann);
}
.clients{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:2rem;
  padding-top:1.4rem;border-top:1px solid var(--line);
}
.clients .lbl{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ann)}
.clients .c{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- guarantee: QC tag ---------- */
.guarantee{padding-block:0 clamp(3rem,7vw,5.2rem)}
.guarantee .wrap{
  display:flex;gap:1.4rem;align-items:flex-start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:1.7rem;
  outline:1.5px dashed var(--red);outline-offset:5px;
  max-width:calc(var(--wrap) - 2*var(--pad));
}
.gi{
  flex:none;width:66px;height:66px;border-radius:50%;
  border:2px solid var(--red-deep);color:var(--red-deep);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.52rem;font-weight:700;text-transform:uppercase;
  text-align:center;line-height:1.3;
  transform:rotate(-8deg);
}
.guarantee h3{margin-bottom:.35rem}
.guarantee p{color:var(--ink-soft);max-width:65ch}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;display:grid;gap:.6rem}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:6px;padding:.95rem 1.1rem}
.faq-list details[open]{border-color:var(--red);outline:1px dashed var(--red);outline-offset:3px}
.faq-list summary{
  cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);color:var(--red-deep);font-size:1rem;flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin-top:.6rem;color:var(--ink-soft);font-size:.97rem;max-width:65ch}

/* ---------- final CTA ---------- */
.final{
  background:var(--vinyl);color:var(--inv);text-align:center;
  padding-block:clamp(3.4rem,8vw,5.6rem);position:relative;overflow:clip;
}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
}
.final .wrap{position:relative}
.final h2{color:#fff;font-size:clamp(2.2rem,5vw,3.5rem);margin:.8rem 0 .8rem}
.final p{color:var(--inv-soft);max-width:52ch;margin-inline:auto;margin-bottom:1.4rem}
.final .kick{color:var(--ann-inv)}
.final .kick::before{background:var(--red-hot)}
.final .micro{font-size:.9rem;margin-top:1.2rem;margin-bottom:0}
.final .micro a{font-weight:600}

/* ---------- footer ---------- */
footer{background:var(--vinyl);color:var(--inv-soft);border-top:1px solid var(--line-inv);padding-block:2.6rem 1.4rem;font-size:.95rem}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:1.8rem}
.logo-chip{background:#fff;padding:.5rem .8rem;border-radius:6px;display:inline-flex;line-height:0}
.logo-chip img{height:24px;width:auto}
.foot-blurb{font-size:.9rem;margin-top:.9rem;max-width:34ch}
.foot-cols h4,.foot-cols .foot-h4{font-family:var(--mono);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ann-inv);margin-bottom:.8rem}
.foot-cols a{display:block;padding:.22rem 0;font-size:.92rem;color:var(--inv-soft);transition:color .15s}
.foot-cols a:hover{color:#fff}
.foot-cols span{display:block;padding:.22rem 0;font-size:.92rem}
.service-area{
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ann-inv);border-top:1px dashed var(--line-inv);padding-top:1.2rem;line-height:2;
}
.service-area a{color:var(--inv);text-decoration:underline;text-underline-offset:2px}
.service-area a:hover{color:var(--red-hot)}
.foot-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-inv);
  font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ann-inv);
}

/* ---------- sticky mobile CTA ---------- */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:.7rem var(--pad);background:oklch(0.19 0.006 270 / .92);backdrop-filter:blur(8px)}
.sticky .btn{width:100%}

/* ---------- subpage pieces ---------- */
.page-hero{
  background:var(--vinyl);color:var(--inv);position:relative;overflow:clip;
  padding-block:clamp(2.8rem,6vw,4.4rem);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
}
.page-hero.img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, oklch(0.19 0.006 270) 45%, oklch(0.19 0.006 270 / .55) 70%, oklch(0.19 0.006 270 / .25)), var(--bg,none);
  background-size:cover;background-position:right center;
  z-index:0;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:16ch;margin:.9rem 0 1rem;font-size:clamp(2.2rem,5.2vw,3.8rem)}
.page-hero h1 em{font-style:normal;color:var(--red-hot)}
.page-hero .sub{color:var(--inv-soft);max-width:56ch;font-size:1.08rem;margin-bottom:1.4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.crumb{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ann-inv);
}
.crumb a{text-decoration:underline;text-underline-offset:2px}
.crumb a:hover{color:#fff}

.prose{max-width:72ch;margin-inline:auto;padding-inline:var(--pad)}
.prose h2{margin:2.4rem 0 .9rem;font-size:clamp(1.5rem,2.8vw,2.05rem)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1.05rem;color:var(--ink-soft)}
.prose p b,.prose li b{color:var(--ink)}
.prose a{color:var(--red-deep);font-weight:600}
.prose ul{margin:0 0 1.1rem;display:grid;gap:.55rem}
.prose li{position:relative;padding-left:1.3rem;color:var(--ink-soft)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:1px;background:var(--red-deep)}

.svc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.9rem}
.svc-links a{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:1.05rem 1.15rem;transition:transform .18s cubic-bezier(.19,1,.22,1), box-shadow .18s;
}
.svc-links a:hover{transform:translateY(-2px);box-shadow:5px 6px 0 rgba(15,15,18,.07);outline:1.5px dashed var(--red);outline-offset:3px}
.svc-links b{font-family:var(--disp);font-weight:700;font-size:1.06rem;letter-spacing:.02em;text-transform:uppercase;display:block;margin-bottom:.15rem}
.svc-links span{font-size:.88rem;color:var(--ink-soft)}

/* legacy benefit grid (kept for any page using it) */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.ben{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.25rem}
.ben .ic{color:var(--red-deep);margin-bottom:.65rem}
.ben h3{margin-bottom:.3rem}
.ben p{font-size:.93rem;color:var(--ink-soft)}

/* ---------- reveal motion (visible without JS) ---------- */
.js .rv.in{animation:rise .7s cubic-bezier(.19,1,.22,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .rv.in{animation:none}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding-block:2.5rem}
  .steps{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .g1{grid-column:span 2}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .navmenu{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:var(--z-menu);
    background:var(--vinyl);border-bottom:1px solid var(--line-inv);
    flex-direction:column;padding:.6rem var(--pad) 1rem;
  }
  .navmenu.open{display:flex}
  .navmenu a{padding:.8rem .4rem;font-size:.8rem;border-bottom:1px solid var(--line-inv)}
  .burger{display:flex}
  .nav-right .btn{display:none}
  .sticky{display:block}
  body{padding-bottom:64px}
  .row2{grid-template-columns:1fr}
  .guarantee .wrap{flex-direction:column}
  .trust .wrap{justify-content:flex-start;gap:.35rem 1.4rem}
}
@media (max-width:520px){
  .gal{grid-template-columns:1fr;grid-auto-rows:200px}
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1}
  .foot-cols{grid-template-columns:1fr}
}