/* SW Excavating — archetype B, work-first.
   No hero. The page opens on three full-bleed job frames with the identity
   overlaid on top of them. Chosen because the pitch IS the photography: every
   image on their live site is stock, so the demo makes the missing work the
   first and largest thing on the page.

   Earth and machine: bark brown, dry grass, and the yellow every excavator in
   the valley is painted. Humanist sans throughout, no condensed caps — nothing
   like the auto-shop builds in the ledger. */

:root{
  --ink:#201c16; --ink-2:#5a5148; --line:#ddd6ca;
  --paper:#faf7f1; --bone:#f0eade;
  --bark:#3a2f24; --clay:#7a5c3a; --yellow:#e8b230;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans)}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0 0 .5em}
a{color:inherit}
.btn{display:inline-block;background:var(--yellow);color:var(--bark);text-decoration:none;
     font-weight:700;padding:15px 30px;border:0;border-radius:2px;font-size:17px;cursor:pointer}
.btn:hover{background:#f3c245}

/* the work, first and full bleed */
.reel{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
      background:var(--bark);min-height:78vh}
.job{margin:0;position:relative;display:flex;flex-direction:column}
.ph{flex:1;background:repeating-linear-gradient(30deg,#4a3e31 0 16px,#443930 16px 32px);
    display:grid;place-items:center;padding:24px;text-align:center;
    color:#8a7c6c;font-size:13px;letter-spacing:.05em;min-height:300px}
.ph::after{content:attr(data-ph)}
.job figcaption{background:var(--bark);color:#b9ab99;padding:20px 22px;font-size:14.5px;
                border-top:1px solid #4a3e31}
.job .n{display:block;color:var(--yellow);font-size:12px;letter-spacing:.2em;margin-bottom:6px}
.job b{display:block;color:#fff;font-size:17px;margin-bottom:4px}

.overlay{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
         max-width:620px;margin:0 auto;background:rgba(32,28,22,.94);color:#fff;
         padding:38px 40px;border-left:5px solid var(--yellow);text-align:left}
h1{font-size:clamp(2.2rem,5.4vw,3.4rem);margin-bottom:.2em}
.overlay p{color:#cbbfae;font-size:19px;margin:0 0 26px}
.overlay .note{font-size:13.5px;color:#8f8578;line-height:1.75;margin:26px 0 0;
      border-top:1px solid #4a3e31;padding-top:18px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bone);
       border-bottom:1px solid var(--line);text-align:center}
.facts div{padding:34px 18px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-size:40px;color:var(--clay);line-height:1}
.facts span{font-size:14px;color:var(--ink-2)}

section.what,section.owner,section.talk{max-width:1020px;margin:0 auto;padding:76px 40px}
h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:30px}
.three h3{font-size:20px;color:var(--clay);border-top:3px solid var(--yellow);padding-top:16px}
.three p{color:var(--ink-2);font-size:16px}

.owner{display:grid;grid-template-columns:280px 1fr;gap:46px;align-items:start}
.ph.sq{aspect-ratio:1;min-height:0;border-radius:2px}
.owner p{color:var(--ink-2)}
.sig{font-style:italic}

.talk .two{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:28px;align-items:start}
form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:28px}
label{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
      color:var(--ink-2);margin-bottom:16px}
input,textarea{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);
      border-radius:2px;font:inherit;font-size:16px;background:var(--paper)}
input:focus,textarea:focus{outline:2px solid var(--clay);border-color:transparent}
.direct h3{font-size:18px}
.direct p{color:var(--ink-2);font-size:16px}
.direct a{color:var(--clay);font-weight:600}
.sent{background:#eef4e9;border:1px solid #c2d8b4;padding:16px;border-radius:2px;margin-top:20px}

footer{background:var(--bark);color:#b9ab99;padding:34px 40px;font-size:14.5px}
footer b{color:#fff}
footer a{color:var(--yellow)}
.demo{font-size:12.5px;color:#7d7164;margin-top:8px}

@media (max-width:900px){
  .reel{grid-template-columns:1fr;min-height:0}
  .job:nth-child(n+3){display:none}       /* two frames is enough on a phone */
  .overlay{position:static;transform:none;max-width:none;padding:32px 22px;
           border-left:0;border-top:5px solid var(--yellow)}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--line);padding:22px}
  section.what,section.owner,section.talk{padding:56px 22px}
  .three,.owner,.talk .two{grid-template-columns:1fr}
  .owner .port{max-width:240px}
  footer{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}