/* ==========================================================================
   GRASSHOPPER SLICK — Autobody & Restoration, Moore OK
   The page is a shop work order: title-block masthead, mono field labels,
   1.5px solid rules, status stamps rotated off-square.
   Tokens, type and layout are ported from grasshopper-slick-landing.html.
   ========================================================================== */

/* ---------- self-hosted type (latin subsets) ---------- */
@font-face{
  font-family:'Anton';
  src:url('../fonts/anton-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-400-600-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --booth:#EDEAE4;
  --concrete:#CFCCC4;
  --steel:#1A1B1E;
  --primer:#79818A;
  --tape:#F0C231;
  --oxide:#B23A2E;
  --ink-soft:#3a3c40;
  --rule:1.5px solid var(--steel);
  --titleblock-h:78px;
}

/* ACCESSIBILITY NOTE — primer slate on booth white measures 3.28:1. That is the
   approved palette and it is what every mono label uses, but it is below the
   WCAG AA 4.5:1 minimum for text under 24px. Nothing here depends on it, so if
   the shop wants AA-clean labels, uncomment the line below — it darkens the
   label slate to 5.25:1 and touches nothing else in the palette.
   :root{ --primer:#5C636B; }                                                    */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--titleblock-h)}
body{
  background:var(--booth);
  color:var(--steel);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
::selection{background:var(--tape);color:var(--steel)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- focus: tape-yellow, in-system ---------- */
:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.btn:focus-visible{outline-offset:3px}

.skip{
  position:absolute;left:8px;top:-60px;z-index:100;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--steel);color:var(--booth);padding:12px 18px;border:var(--rule);
  transition:top .18s ease;
}
.skip:focus-visible{top:8px}

/* ---------- title block (engineering drawing masthead) ---------- */
.titleblock{
  border-bottom:var(--rule);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:stretch;
  position:sticky;top:0;z-index:50;
  background:var(--booth);
}
.titleblock>div{padding:12px 20px;display:flex;flex-direction:column;justify-content:center}
.titleblock .brand{border-right:var(--rule);padding-block:10px}

/* toolbox-decal lockup: mark + wordmark */
.brand-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand-mark{display:block;width:40px;height:40px;flex:none}
.brand-mark img{display:block;width:100%;height:100%}
.brand h1{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(19px,3.4vw,30px);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
}
.brand span{
  display:block;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primer);margin-top:4px;
}
.tb-field{border-right:var(--rule);min-width:120px}
.tb-field:last-child{border-right:none}
.tb-field label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--primer)}
.tb-field b{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.05em}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(300px,5fr) minmax(0,7fr);
  border-bottom:var(--rule);
}
.hero-copy{
  padding:clamp(28px,5vw,64px);
  border-right:var(--rule);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(26,27,30,.05) 27px,rgba(26,27,30,.05) 28.5px);
}
.hero-copy h2{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(42px,6.2vw,92px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.hero-copy h2 em{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1.5px var(--steel);
}
.hero-copy .lede{max-width:44ch;font-size:17px;color:var(--ink-soft);margin-top:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;border:var(--rule);background:var(--steel);color:var(--booth);
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn.ghost{background:transparent;color:var(--steel)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--tape)}

/* ---------- signature: tape-pull before/after ---------- */
.compare{position:relative;overflow:hidden;user-select:none;min-height:380px;background:var(--concrete)}
.compare picture{position:absolute;inset:0;display:block}
.compare img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.compare .before{filter:grayscale(1) contrast(1.05) brightness(1.02)}
.compare .after{clip-path:inset(0 0 0 var(--split,55%))}

.tape-handle{
  position:absolute;top:0;bottom:0;left:var(--split,55%);
  width:26px;transform:translateX(-13px);
  background:var(--tape);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px);
  box-shadow:0 0 0 1.5px var(--steel), 0 0 18px rgba(0,0,0,.35);
  cursor:ew-resize;z-index:3;
}
.tape-handle::after{
  content:'\25C2 PULL \25B8';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.25em;font-weight:500;
  white-space:nowrap;color:var(--steel);
}
.compare input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;z-index:4;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  touch-action:pan-y;           /* vertical swipes still scroll the page */
}
/* zero-width thumb so click position maps 1:1 to the split */
.compare input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%}
.compare input[type=range]::-moz-range-thumb{width:1px;height:100%;border:0;border-radius:0}
.compare:has(input[type=range]:focus-visible) .tape-handle{
  box-shadow:0 0 0 1.5px var(--steel), 0 0 0 5px var(--tape), 0 0 0 7px var(--steel);
}

.compare-tag{
  position:absolute;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;
  background:var(--steel);color:var(--booth);padding:6px 10px;
}
.tag-before{left:14px;top:14px}
.tag-after{right:14px;top:14px;background:var(--tape);color:var(--steel);box-shadow:0 0 0 1.5px var(--steel)}
.compare-caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  background:rgba(237,234,228,.92);border:var(--rule);padding:8px 12px;max-width:80%;
}

/* ---------- section headers ---------- */
.secthead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:18px 20px;border-bottom:var(--rule)}
.secthead h3{font-family:'Anton',Impact,sans-serif;font-size:clamp(22px,3vw,32px);text-transform:uppercase;letter-spacing:.02em}
.secthead .mono{font-size:11px;letter-spacing:.16em;color:var(--primer);text-transform:uppercase}

/* ---------- job cards ---------- */
.floor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:var(--rule)}
.job{border-right:var(--rule);position:relative;background:var(--booth);min-width:0}
.job:last-child{border-right:none}

.ph{position:relative;overflow:hidden;aspect-ratio:4/3;border-bottom:var(--rule);background:var(--concrete)}
.ph picture{display:block;width:100%;height:100%}
.ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06);
  transition:filter .55s ease, transform .45s ease;
}
/* the peel — and hover — take a photo out of primer and into full color */
.ph.is-in img{filter:none}
.job:hover .ph img{filter:none;transform:scale(1.025)}

/* masking paper: booth-white kraft with a tape-yellow leading edge.
   Hidden unless JS is running (nothing must be able to stay covered). */
.ph-mask{
  display:none;
  position:absolute;inset:-3% -6%;z-index:1;
  transform:translate3d(0,0,0) rotate(-1.1deg);
  background:
    repeating-linear-gradient(92deg, rgba(26,27,30,.030) 0 1px, transparent 1px 6px),
    linear-gradient(176deg, #F6F4EF 0%, var(--booth) 40%, #E4E1D9 100%);
  will-change:transform;
}
.js .ph-mask{display:block}
.ph-mask::before{        /* the tape strip that leads the pull */
  content:'';position:absolute;left:0;right:0;top:0;height:15px;
  background:var(--tape);
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px);
  box-shadow:0 1.5px 0 var(--steel), 0 -7px 16px rgba(26,27,30,.30);
}
.ph-mask::after{         /* torn fibre along the tape line */
  content:'';position:absolute;left:0;right:0;top:15px;height:3px;
  background:repeating-linear-gradient(90deg, rgba(26,27,30,.16) 0 3px, transparent 3px 11px);
}

.stamp{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.2em;
  border:2px solid var(--oxide);color:var(--oxide);
  padding:5px 9px;transform:rotate(-4deg);background:rgba(237,234,228,.85);
  transition:transform .25s ease;
}
.stamp.paint{border-color:var(--steel);color:var(--steel)}
.job:hover .stamp{transform:rotate(-1.5deg) translateY(-1px)}

.job .meta{padding:16px 18px 20px}
.job .meta .no{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--primer)}
.job .meta h4{font-family:'Anton',Impact,sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin:4px 0 8px}
.job .meta p{font-size:14px;color:var(--ink-soft);max-width:36ch}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:var(--rule);background:var(--steel);color:var(--booth)}
.step{padding:26px 20px 34px;border-right:1.5px solid rgba(237,234,228,.25)}
.step:last-child{border-right:none}
.step .n{font-family:'Anton',Impact,sans-serif;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--tape)}
.step h4{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:14px 0 8px;color:var(--tape)}
.step p{font-size:13.5px;color:#c8c6c0;line-height:1.5}

/* ---------- footer work order ---------- */
.workorder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);position:relative;overflow:hidden}
.wo-mark{                 /* ghosted mark, stamped into the paper */
  position:absolute;right:-4%;bottom:-16%;width:min(46%,460px);
  opacity:.06;pointer-events:none;z-index:0;
}
.wo-left,.wo-right{position:relative;z-index:1}
.wo-left{padding:clamp(28px,5vw,60px);border-right:var(--rule)}
.wo-left h3{font-family:'Anton',Impact,sans-serif;font-size:clamp(30px,4.4vw,54px);text-transform:uppercase;line-height:1;margin-bottom:14px}
.wo-left p{max-width:46ch;color:var(--ink-soft);margin-bottom:26px}
.wo-right{display:flex;flex-direction:column}
.wo-field{border-bottom:var(--rule);padding:16px 20px}
.wo-field:last-child{border-bottom:none;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.wo-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--primer)}
.wo-field b{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;overflow-wrap:anywhere}
.wo-field a{
  color:inherit;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--primer);
  transition:text-decoration-color .15s ease;
}
.wo-field a:hover{text-decoration-color:var(--tape)}
.wo-field a .ext{                 /* leaves-the-site marker, not part of the label */
  display:inline-block;margin-left:5px;font-size:11px;color:var(--primer);
  text-decoration:none;vertical-align:1px;
}

/* awaiting real details from the client — deliberately obvious until filled in */
.tbd{color:var(--ink-soft);border-bottom:1.5px dashed var(--primer);padding-bottom:1px;white-space:nowrap}

.legal{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--primer);padding:14px 20px;border-top:var(--rule)}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.is-in{opacity:1;transform:none}

@keyframes peel{
  from{transform:translate3d(0,0,0) rotate(-1.1deg)}
  to  {transform:translate3d(0,108%,0) rotate(-1.1deg)}
}
@media (prefers-reduced-motion:no-preference){
  .ph{view-timeline-name:--ph;view-timeline-axis:block}

  /* scroll-linked where the browser supports it: the paper tracks the scroll */
  @supports (animation-timeline:view()){
    .ph-mask{
      animation:peel linear both;
      animation-timeline:--ph;
      animation-range:entry 20% cover 52%;
    }
  }
  /* otherwise a one-shot pull, fired by IntersectionObserver */
  @supports not (animation-timeline:view()){
    .ph-mask{transition:transform .95s cubic-bezier(.22,.61,.36,1)}
    .ph.is-in .ph-mask{transform:translate3d(0,108%,0) rotate(-1.1deg)}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .ph-mask,.js .ph-mask{display:none}
  .btn,.ph img,.stamp,.skip{transition:none}
  .btn:hover{transform:none}
  .job:hover .ph img{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-copy{border-right:none;border-bottom:var(--rule);gap:32px}
  .compare{min-height:0;aspect-ratio:4/3}
  .floor{grid-template-columns:minmax(0,1fr)}
  .job{border-right:none;border-bottom:var(--rule)}
  .job:last-child{border-bottom:none}
  .process{grid-template-columns:minmax(0,1fr)}
  .step{padding:22px 20px 26px;border-right:none;border-bottom:1.5px solid rgba(237,234,228,.25)}
  .step:last-child{border-bottom:none}
  .workorder{grid-template-columns:minmax(0,1fr)}
  .wo-left{border-right:none;border-bottom:var(--rule)}
  .wo-mark{width:min(62%,380px);bottom:auto;top:2%;right:-8%}
  .titleblock{grid-template-columns:minmax(0,1fr) auto}
  .tb-field.hide-sm{display:none}
}
@media (max-width:640px){
  :root{--titleblock-h:80px}
  /* the hard breaks are a desktop composition; let the display type wrap itself */
  .hero-copy h2 br{display:none}
  .brand-mark{width:34px;height:34px}
  .brand-lockup{gap:10px}
  /* tighten the sheet field so the wordmark still fits on one line beside the mark */
  .titleblock>div{padding:10px 12px}
  .tb-field{min-width:0}
  .tb-field label{font-size:8px}
  .tb-field b{font-size:11px;letter-spacing:.03em}
  .compare-caption{font-size:10px;left:10px;bottom:10px;max-width:calc(100% - 20px)}
  .secthead{padding:16px}
  .job .meta{padding:14px 16px 18px}
  .wo-field{padding:14px 16px}
  .legal{padding:14px 16px;line-height:1.6}
}