/* Marshall's Welding & Fabrication — the site's own layer, REBUILT 2026-10-18 on the artifact standard (Adam, 10/14: "these
   sites look very templated fix it"). The kit carries the plumbing; every band below is an object from Kevin's shop, named in
   concept.json. Type: Big Shoulders Display over IBM Plex Sans, IBM Plex Mono for part numbers, Caveat on the tape only. */

h1, h2, h3 { font-weight: 600; letter-spacing: .005em }
h1 em, h2 em { font-style: normal; color: var(--accent) }
.mw-steps a, .mw-reach a, .mw-road .tlink, .mw-bay a { display: inline-flex; align-items: center; min-height: 44px }

/* brushed aluminum, the sheet every engraved title is cut into (hero + inner openings) */
.mw-alu { position: relative; color: var(--ink-2);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .26) 0 1px, rgba(30, 34, 38, .03) 1px 2px, transparent 2px 3px),
    linear-gradient(170deg, var(--sheet-hi), var(--sheet-lo));
  box-shadow: inset 0 0 0 1px rgba(30, 34, 38, .12) }
.mw-alu h1 { color: var(--ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(30, 34, 38, .18) }

/* ══ THE HERO: his hull photo, a brushed sheet TIG-welded to it at the seam ══ */
.mw-hero { padding: clamp(28px, 4vw, 56px) 0 0; background: var(--paper) }
.mw-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.12fr); align-items: stretch }
.mw-hero-sheet { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4.4vw, 68px) clamp(26px, 3.6vw, 56px) }
.mw-hero-sheet h1 { margin: 0 0 18px; padding-bottom: .1em; font-size: clamp(3.4rem, 6.6vw, 6.6rem); line-height: 1.02; text-wrap: balance }
body.light .mw-hero-k { margin: 0 0 18px; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent) }
body.light .mw-hero-sub { margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 28em }
.mw-seam { position: relative; z-index: 2; margin: 0 -1px;
  background: radial-gradient(circle at 50% 50%, #FAFBFB 0 1.5px, #D3D7DA 3px, var(--bead) 5px, #8E959B 6.6px, rgba(142, 149, 155, 0) 7.6px) 0 0 / 18px 11px repeat-y,
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 22%, rgba(255, 255, 255, .7) 78%, rgba(255, 255, 255, 0)) }   /* the stacked dimes, and the frosted line the arc cleans either side */
.mw-hero-ph { margin: 0 }
.mw-hero-ph img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover }

/* ══ THE MAKER'S PLATE (kept from the first build) ══ */
/* ── the maker's plate ── */
.mplate .pm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}
.pm-q{margin:30px 0 0;padding:0 0 0 22px;border-left:2px solid var(--accent)}
.pm-q p{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.3;color:var(--ink);margin:0}
.pm-q cite{display:block;margin-top:10px;font-style:normal;font-size:15px;color:var(--muted)}
.pm-obj{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:22px;align-items:end}
.plate{position:relative;padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,40px);color:var(--accent-2);
  background:
    linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 46%,transparent 62%) var(--sheen,0%) 0/260% 100% no-repeat,
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,var(--alu-hi),var(--alu) 48%,var(--alu-lo));
  outline:1px solid rgba(30,34,38,.18);outline-offset:-7px}
.plate .rv{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--alu-lo) 60%,#7d858c)}
.plate .tl{top:14px;left:14px}.plate .tr{top:14px;right:14px}.plate .bl{bottom:14px;left:14px}.plate .br{bottom:14px;right:14px}
.plate p{margin:0;text-shadow:0 1px 0 rgba(255,255,255,.75),0 -1px 0 rgba(0,0,0,.22)}
.pl-k{font-size:15px;letter-spacing:.2em;text-transform:uppercase}
.pl-name{position:relative;font-family:var(--serif);font-stretch:125%;font-weight:600;font-size:clamp(1.9rem,3.6vw,3.3rem);line-height:1;letter-spacing:-.01em;margin-top:10px!important;color:#4a5259;overflow:hidden}
.pl-cut{position:absolute;top:8%;bottom:8%;left:-10px;width:3px;background:var(--lume);box-shadow:0 0 14px 3px rgba(224,120,46,.55)}
.pl-sub{font-size:17px;margin-top:10px!important}
.pl-spec{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(30,34,38,.2);font-size:15px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.pl-spec b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.pm-ph{margin:0}.pm-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.pm-ph figcaption{font-size:15px;color:var(--muted);margin-top:10px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .plate{animation:mpSheen linear both;animation-timeline:view();animation-range:entry 10% exit 90%}
    .pl-cut{animation:mpCut linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
    .pl-name span{animation:mpCutIn linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  }
}
@keyframes mpSheen{from{--sheen:120%}to{--sheen:-20%}}
@property --sheen{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes mpCut{from{left:-10px}to{left:calc(100% + 10px)}}
@keyframes mpCutIn{from{opacity:.55}to{opacity:1}}

/* ══ THE CUT SHEET: the services as parts off the CNC plasma table, each cut in the shape of its job ══ */
.mw-sheet { padding: clamp(72px, 9vw, 128px) 0; background: var(--stone) }
.mw-sheet-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 52px) }
.mw-sheet-h h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98 }
body.light .mw-sheet-h p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2) }
.mw-sheet-h p span { display: block; margin-top: 8px; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.mw-bed { position: relative; padding: clamp(20px, 2.8vw, 38px); background-color: var(--bed);
  background-image: repeating-linear-gradient(90deg, rgba(30, 34, 38, .11) 0 2px, transparent 2px 46px), linear-gradient(180deg, #E1E4E6, #CFD3D6) }
body.light .mw-bed-k, .mw-bed-k { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 30px; margin: 0 0 18px; font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.mw-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px) }
.mw-part { grid-column: span 2; filter: drop-shadow(0 12px 12px rgba(30, 34, 38, .22)) }
.mw-part.pt-fuel-tanks, .mw-part.pt-brackets { grid-column: span 3 }
.mw-pi { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(200px, 19vw, 250px); padding: clamp(22px, 2.4vw, 30px); text-decoration: none; color: var(--ink);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, rgba(30, 34, 38, .035) 1px 2px, transparent 2px 3px), linear-gradient(175deg, #F4F5F6, #D8DCDF);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1) }
a.mw-pi:hover { transform: translateY(-4px) }
.mw-pn { display: block; font-style: normal; font: 500 12px/1 var(--sans); letter-spacing: .14em; color: var(--accent) }
.mw-pi .mw-pt { display: block; margin: 10px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1; color: var(--ink) }
.mw-pd { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--body) }
/* the shapes (and the bolt holes, cut through to the bed) */
.pt-fuel-tanks .mw-pi { padding-top: 56px; clip-path: polygon(0 22px, 68% 22px, 68% 0, 82% 0, 82% 22px, 100% 22px, 100% 100%, 0 100%) }
.pt-brackets .mw-pi { clip-path: polygon(0 0, calc(100% - 96px) 0, 100% 96px, 100% 100%, 0 100%);
  background: radial-gradient(circle at 30px 30px, var(--bed) 0 7px, rgba(30, 34, 38, .35) 7px 8.5px, transparent 9px), radial-gradient(circle at 64px 30px, var(--bed) 0 7px, rgba(30, 34, 38, .35) 7px 8.5px, transparent 9px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, rgba(30, 34, 38, .035) 1px 2px, transparent 2px 3px), linear-gradient(175deg, #F4F5F6, #D8DCDF) }
.pt-t-tops .mw-pi { padding-bottom: 58px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 84% calc(100% - 28px), 84% 100%, 70% 100%, 70% calc(100% - 28px), 30% calc(100% - 28px), 30% 100%, 16% 100%, 16% calc(100% - 28px), 0 calc(100% - 28px)) }
.pt-boats .mw-pi { padding-top: 58px; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 40%) }
.pt-cnc-plasma .mw-pi { padding-top: 52px;
  background: radial-gradient(circle at 18% 24px, var(--bed) 0 8px, rgba(30, 34, 38, .35) 8px 9.5px, transparent 10px), radial-gradient(circle at 50% 24px, var(--bed) 0 8px, rgba(30, 34, 38, .35) 8px 9.5px, transparent 10px), radial-gradient(circle at 82% 24px, var(--bed) 0 8px, rgba(30, 34, 38, .35) 8px 9.5px, transparent 10px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, rgba(30, 34, 38, .035) 1px 2px, transparent 2px 3px), linear-gradient(175deg, #F4F5F6, #D8DCDF) }

/* ══ THE PORTHOLE: the dock at dusk through a brushed ring with six bolts ══ */
.mw-port { padding: clamp(72px, 9vw, 128px) 0; background: var(--paper) }
.mw-port-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); align-items: center }
.mw-porthole { position: relative; margin: 0; justify-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1; border-radius: 50%; padding: clamp(18px, 2.4vw, 28px);
  background: conic-gradient(from 20deg, #F5F6F7, #B6BCC1, #EEF0F1, #A7AEB4, #F5F6F7, #BAC0C5, #F5F6F7);
  box-shadow: 0 30px 60px -36px rgba(30, 34, 38, .55), inset 0 0 0 1px rgba(30, 34, 38, .16) }
.mw-porthole img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.mw-porthole::after { content: ''; position: absolute; inset: clamp(18px, 2.4vw, 28px); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(30, 34, 38, .35), inset 0 10px 24px rgba(30, 34, 38, .28); pointer-events: none }
.mw-bolts { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 2.6%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px), radial-gradient(circle at 91.6% 26.3%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px),
    radial-gradient(circle at 91.6% 73.7%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px), radial-gradient(circle at 50% 97.4%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px),
    radial-gradient(circle at 8.4% 73.7%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px), radial-gradient(circle at 8.4% 26.3%, #EEF0F1 0 2px, #7D858C 5px, transparent 5.6px) }
.mw-port-txt h2 { margin: 0 0 14px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98 }
body.light .mw-port-txt p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 26em; color: var(--body) }

/* ══ THE TAPE: the review in marker on blue painter's tape, stuck to a tank wall ══ */
.mw-tape { padding: clamp(72px, 9vw, 128px) 0; background: var(--stone) }
.mw-tape-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: clamp(30px, 4vw, 48px) }
.mw-tape-h h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98 }
body.light .mw-tape-h p { margin: 0; font-size: 17px; color: var(--body) }
.mw-wall { display: grid; gap: clamp(30px, 4vw, 52px); padding: clamp(40px, 5vw, 72px) clamp(24px, 4.4vw, 72px);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .26) 0 1px, rgba(30, 34, 38, .03) 1px 2px, transparent 2px 3px), linear-gradient(176deg, var(--sheet-hi), var(--sheet-lo));
  box-shadow: inset 0 0 0 1px rgba(30, 34, 38, .12) }
.mw-strip { margin: 0; max-width: 860px }
.mw-strip.s1 { transform: rotate(-1deg) }
.mw-strip.s2 { transform: rotate(.7deg); justify-self: end; text-align: right }
.mw-strip blockquote { display: inline; margin: 0; padding: .1em .45em; font-family: var(--hand); font-weight: 600; font-size: clamp(1.75rem, 2.6vw, 2.45rem); line-height: 1.62;
  color: var(--tape-ink); background: var(--tape); -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 1px 2px rgba(30, 34, 38, .18) }
.mw-strip figcaption { margin-top: 14px; font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }

/* ══ THE TANK: getting a job in, one step per baffle bay ══ */
.mw-tanksec { padding: clamp(72px, 9vw, 128px) 0; background: var(--paper) }
.mw-tanksec h2 { margin: 0 0 clamp(44px, 5vw, 64px); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98 }
.mw-tank { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); border: 6px solid #B3B9BE; border-radius: 16px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, rgba(30, 34, 38, .025) 1px 2px, transparent 2px 3px), linear-gradient(180deg, #F3F4F5, #E2E5E7) }
.mw-neck { position: absolute; top: -36px; right: 12%; width: 70px; height: 30px; border: 6px solid #B3B9BE; border-bottom: 0; border-radius: 10px 10px 0 0; background: #EDEFF0 }
.mw-baffle { position: relative; background: linear-gradient(90deg, #A9AFB4, #D9DCDF 50%, #A9AFB4) }
.mw-baffle::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 28px; height: 14px; margin-left: -14px; border-radius: 14px 14px 0 0; background: #E4E7E9 }   /* the limber hole */
.mw-bay { display: grid; gap: 8px; align-content: start; padding: clamp(24px, 3vw, 40px) }
.mw-bn { font: 500 13px/1 var(--sans); letter-spacing: .14em; color: var(--accent) }
.mw-bay b { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 2.4vw, 2.2rem); line-height: 1.05; color: var(--ink) }
.mw-bay > span:last-child { font-size: 17px; line-height: 1.5; color: var(--body) }
.mw-bay a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px }

/* ══ HIS ROADSIDE SIGN: the real one, and the address lettered in its red ══ */
.mw-road { padding: clamp(72px, 9vw, 128px) 0; background: var(--stone) }
.mw-road-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center }
.mw-road-ph { margin: 0 }
.mw-road-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
body.light .mw-road-k { margin: 0 0 14px; color: var(--accent) }
.mw-road-txt h2 { margin: 0 0 18px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98; color: var(--accent) }
body.light .mw-road-a { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: var(--ink) }
.mw-arrow { position: relative; display: inline-block; flex: 0 0 auto; width: 46px; height: 16px; margin-right: 14px; background: linear-gradient(var(--accent), var(--accent)) right center / 34px 6px no-repeat }
.mw-arrow::before { content: ''; position: absolute; left: 0; top: 0; border-right: 16px solid var(--accent); border-top: 8px solid transparent; border-bottom: 8px solid transparent }
body.light .mw-road-h { margin: 0 0 10px; font-size: 17px; color: var(--body) }
.mw-road .tlink { color: var(--accent-txt) }

/* ══ THE CLOSE: a weld bead laid across the band, the arc still lit at its end ══ */
.mw-close { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); background: var(--paper); overflow: hidden }
.mw-run { position: relative; height: 18px; margin: 0 0 clamp(48px, 6vw, 80px) }
.mw-bead { position: absolute; left: 0; top: 0; bottom: 0; width: 64%;
  background: radial-gradient(circle at 50% 50%, #FAFBFB 0 1.5px, #D3D7DA 3px, var(--bead) 5px, #8E959B 6.6px, rgba(142, 149, 155, 0) 7.6px) 0 0 / 11px 18px repeat-x }
.mw-arc { position: absolute; left: 64%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 5px, #FFF1D6 9px, rgba(240, 142, 69, .55) 22px, rgba(240, 142, 69, .12) 42px, rgba(240, 142, 69, 0) 60px) }
@media (prefers-reduced-motion: no-preference) { .mw-arc { animation: mwArc 2.4s ease-in-out infinite } }
@keyframes mwArc { 0%, 100% { transform: scale(1) } 50% { transform: scale(.88) } }
.mw-close-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center }
.mw-close-txt h2 { margin: 0 0 16px; font-size: clamp(2.8rem, 5.4vw, 4.8rem); line-height: .96; text-wrap: balance }
body.light .mw-close-txt p { margin: 0 0 26px; font-size: 18px; line-height: 1.55; color: var(--body) }
.mw-close-ph { margin: 0 }
.mw-close-ph img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover }

/* ══ THE PAGE OPENING (inner pages): the title engraved in a brushed sheet, his photograph beside it ══ */
.mw-open { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); background: var(--paper) }
.mw-open-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch }
.mw-open-sheet { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 56px) }
body.light .mw-open .crumbs, body.light .mw-open .crumbs a { color: var(--ink-3) }
body.light .mw-open .crumbs a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px }
.mw-open-sheet h1 { margin: 12px 0 14px; font-size: clamp(3rem, 5.6vw, 5.4rem); line-height: .96; text-wrap: balance }
body.light .mw-open-l { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 30em }
.mw-open-ph { margin: 0 }
.mw-open-ph img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover }

/* ══ SERVICES: the cut part first, then the work ══ */
.mw-svc { padding: clamp(64px, 8vw, 112px) 0; background: var(--paper) }
.mw-svc.r1 { background: var(--stone) }
.mw-svc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start }
.mw-parts-one { display: block; margin: 0 0 24px }
.mw-parts-one .mw-pi { min-height: 0 }
body.light .mw-svc-txt > p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--body); max-width: 34em }
.mw-check { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 10px }
.mw-check li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.45; color: var(--ink) }
.mw-check li::before { content: ''; position: absolute; left: 0; top: .5em; width: 18px; height: 6px; border-radius: 3px; background: var(--bead); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(30, 34, 38, .25) }   /* a short tack weld */
.mw-svc-ph { display: grid; gap: 14px }
.mw-svc-ph.n3 { grid-template-columns: 1fr 1fr }
.mw-svc-ph.n3 figure:first-child { grid-column: 1 / 3 }
.mw-svc-ph figure { margin: 0 }
.mw-svc-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.mw-svc-ph.n3 figure:first-child img { aspect-ratio: 16 / 10 }
.mw-svc-ph.n1 img { aspect-ratio: 4 / 5 }
.mw-svc-ph.n2 img { aspect-ratio: 3 / 4 }
.mw-svc-ph.n2 { grid-template-columns: 1fr 1fr }
.mw-svc-ph figcaption { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--body) }

/* ══ ABOUT: the shirt mark and his words; the promises as callouts on a shop drawing ══ */
.mw-story { padding: clamp(72px, 9vw, 128px) 0; background: var(--paper) }
.mw-story-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: center }
.mw-story-txt h2 { margin: 0 0 18px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .98 }
body.light .mw-story-txt p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; max-width: 34em; color: var(--body) }
.mw-story-mk { margin: 0; justify-self: center; width: min(100%, 380px) }
.mw-story-mk img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover }
.mw-story-mk figcaption { margin-top: 10px; font-size: 15px; color: var(--muted) }
.mw-draw { padding: 0 0 clamp(72px, 9vw, 128px); background: var(--paper) }
.mw-draw-sheet { position: relative; padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4vw, 64px) clamp(76px, 7vw, 96px); background-color: var(--draw);
  background-image: linear-gradient(rgba(60, 100, 140, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 100, 140, .09) 1px, transparent 1px); background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px rgba(60, 100, 140, .25) }
.mw-draw-sheet h2 { margin: 0 0 clamp(28px, 3.4vw, 44px); font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1 }
.mw-calls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 44px) clamp(30px, 5vw, 80px) }
.mw-calls li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 18px; align-items: start }
.mw-sym { position: relative; grid-row: 1 / 3; height: 26px; margin-top: 6px; background: linear-gradient(var(--ink-3), var(--ink-3)) 0 100% / 100% 1.5px no-repeat }
.mw-sym::after { content: ''; position: absolute; left: 24px; bottom: 1.5px; border-left: 14px solid transparent; border-bottom: 14px solid var(--ink-3) }   /* the fillet weld symbol on its reference line */
.mw-sym::before { content: ''; position: absolute; left: -10px; bottom: -6px; width: 14px; height: 1.5px; background: var(--ink-3); transform: rotate(40deg); transform-origin: right center }
.mw-calls b { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.1vw, 1.95rem); line-height: 1.05; color: var(--ink) }
.mw-calls li > span:last-child { font-size: 17px; line-height: 1.5; color: var(--body) }
body.light .mw-tblock, .mw-tblock { position: absolute; right: 0; bottom: 0; display: flex; margin: 0; border-top: 1px solid rgba(60, 100, 140, .35); border-left: 1px solid rgba(60, 100, 140, .35);
  font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.mw-tblock span { padding: 12px 16px; border-right: 1px solid rgba(60, 100, 140, .35) }
.mw-tblock span:last-child { border-right: 0 }

/* ══ CONTACT: the form, and his roadside sign beside it ══ */
.mw-contact-side { display: grid; gap: 28px; align-content: start }
.mw-road-mini { padding: 0; background: none }
.mw-road-mini .mw-road-in { grid-template-columns: minmax(0, 1fr); gap: 18px }
.mw-reach { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.mw-reach li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.mw-reach span { font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.mw-reach a { font-size: 18px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere }

/* ══ THE FOOTER: a strip of diamond plate, his shirt mark, the plain facts ══ */
.mw-foot { padding-top: 0 }
.mw-diamond { height: clamp(46px, 5vw, 64px); margin-bottom: clamp(48px, 6vw, 80px); background-color: #D5D9DC;
  background-image: linear-gradient(135deg, transparent 0 40%, rgba(255, 255, 255, .85) 40% 46%, rgba(120, 128, 135, .55) 46% 52%, transparent 52%),
    linear-gradient(45deg, transparent 0 40%, rgba(255, 255, 255, .85) 40% 46%, rgba(120, 128, 135, .55) 46% 52%, transparent 52%);
  background-size: 30px 16px; background-position: 0 0, 15px 8px; box-shadow: inset 0 -1px 0 rgba(30, 34, 38, .2) }
.mw-foot-top { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); margin-bottom: clamp(36px, 5vw, 60px) }
.mw-foot-mk { width: clamp(96px, 10vw, 132px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line) }
body.light .mw-foot-name { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1; color: var(--ink) }
body.light .mw-foot-a { margin: 8px 0 2px; font-size: 16px; color: var(--body) }
.mw-foot-tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--accent-txt); text-decoration: none }
.mw-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
body.light .mw-fnote { margin: 0 0 14px; font-size: 15px; color: var(--body) }

/* the hotel header's wordmark (kept from the first build) */
.nav.hotel .brand .w1{letter-spacing:.05em}
.nav.hotel .brand .w2{letter-spacing:.2em}
@media(max-width:480px){.nav.hotel .brand .w1{font-size:19px;letter-spacing:.02em}.nav.hotel .brand .w2{font-size:9px;letter-spacing:.1em}}
@media(max-width:350px){.nav.hotel .brand .w1{font-size:16px;letter-spacing:0}.nav.hotel .brand .w2{font-size:8px;letter-spacing:.04em}}

/* ══ PHONES ══ */
@media (max-width: 900px) { .mplate .pm-in { grid-template-columns: minmax(0, 1fr) } .pm-obj { grid-template-columns: minmax(0, 1fr) } .pm-ph { max-width: 420px } }
@media (max-width: 760px) {
  .mw-hero { padding: 0 0 clamp(56px, 14vw, 88px) }
  .mw-hero-in { display: flex; flex-direction: column; width: 100% }
  .mw-hero-ph { order: -2 }
  .mw-seam { order: -1 }   /* the seam joins the photo to the sheet on phones too */
  .mw-hero-ph img { min-height: 0; height: auto; aspect-ratio: 16 / 11 }
  .mw-seam { height: 18px; margin: -1px 0; background: radial-gradient(circle at 50% 50%, #FAFBFB 0 1.5px, #D3D7DA 3px, var(--bead) 5px, #8E959B 6.6px, rgba(142, 149, 155, 0) 7.6px) 0 0 / 11px 18px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 22%, rgba(255, 255, 255, .7) 78%, rgba(255, 255, 255, 0)) }
  .mw-hero-sheet { padding: 26px 22px 30px }
  .mw-hero-sheet h1 { font-size: clamp(3rem, 14vw, 3.9rem) }
  .mw-hero-sub { font-size: 17px }
  .mw-sheet, .mw-port, .mw-tape, .mw-tanksec, .mw-road, .mw-story, .mw-svc { padding: clamp(56px, 14vw, 88px) 0 }
  .mw-sheet-h, .mw-port-in, .mw-road-in, .mw-close-in, .mw-open-in, .mw-svc-in, .mw-story-in { grid-template-columns: minmax(0, 1fr) }
  .mw-parts { grid-template-columns: minmax(0, 1fr) }
  .mw-part, .mw-part.pt-fuel-tanks, .mw-part.pt-brackets { grid-column: auto }
  .mw-pi { min-height: 150px; padding: 20px }
  .pt-fuel-tanks .mw-pi { padding-top: 50px }
  .pt-brackets .mw-pi { clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%) }
  .mw-porthole { width: min(82vw, 380px) }
  .mw-strip.s2 { justify-self: start; text-align: left }
  .mw-strip blockquote { font-size: 1.65rem }
  .mw-tank { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 14px auto 14px auto }
  .mw-baffle { background: linear-gradient(180deg, #A9AFB4, #D9DCDF 50%, #A9AFB4) }
  .mw-baffle::after { left: 22px; bottom: auto; top: 0; width: 14px; height: 14px; margin: 0; border-radius: 0 14px 14px 0 }
  .mw-bay { padding: 22px 20px }
  .mw-close { padding-top: 44px }
  .mw-bead { width: 70% } .mw-arc { left: 70%; width: 90px; height: 90px; margin: -45px 0 0 -45px }
  .mw-open { padding: 0 0 clamp(48px, 12vw, 72px) }
  .mw-open-in { display: flex; flex-direction: column; width: 100% }
  .mw-open-sheet { padding: 22px 22px 26px }
  .mw-open-sheet h1 { font-size: clamp(2.9rem, 13vw, 3.7rem) }
  .mw-open-ph img { min-height: 0; height: auto; aspect-ratio: 16 / 10 }
  .mw-calls { grid-template-columns: minmax(0, 1fr) }
  .mw-calls li { grid-template-columns: 56px minmax(0, 1fr) }
  .mw-draw-sheet { padding-bottom: 92px }
  .mw-tblock span { padding: 10px 10px }
  .mw-story-mk { width: 240px }
  .mw-foot-top { align-items: flex-start }
  .mw-fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .mw-fgrid > div:first-child, .mw-fgrid > div:last-child { grid-column: 1 / -1 }
}

/* ── the chat in his colours (2026-10-18 evening): his card's black on the launcher, the sign's red on send, a weld
   spark and brushed aluminum as its lights; the crossed torches of the shirt mark in the head ── */
:root { --chat-ink: var(--ink); --chat-accent: var(--accent); --chat-dot-a: var(--lume); --chat-dot-b: var(--alu); --chat-head: var(--stone); }
body.light .chathead .mk { width: 42px; height: 42px; flex-basis: 42px; }

/* ══ SURFACES (Adam 10/18: "i hate the stock backgrounds"): every band sits on something from Kevin's shop ══ */
.mw-hero, .mw-sheet, .mw-svc { background: var(--sf-concrete) }        /* the shop floor */
.sec.mplate, .mw-tanksec, .mw-open, .mw-story, .mw-svc.r1 { background: var(--sf-block) }   /* the shop's painted block wall */
.mw-port { background: linear-gradient(180deg, transparent calc(100% - 58px), var(--accent) calc(100% - 58px) calc(100% - 44px), transparent calc(100% - 44px)), var(--sf-hull) }   /* the porthole sits in a white hull, his red boot stripe low on it */
.mw-tape { background: var(--sf-plate) }                               /* diamond plate around the tank wall the tape is stuck to */
.mw-road { background:                                                  /* Old State Road itself: pale asphalt, the double yellow line along the bottom */
  linear-gradient(180deg, transparent calc(100% - 70px), #D9A836 calc(100% - 70px) calc(100% - 64px), transparent calc(100% - 64px) calc(100% - 56px), #D9A836 calc(100% - 56px) calc(100% - 50px), transparent calc(100% - 50px)),
  radial-gradient(rgba(90,90,85,.09) 1px, transparent 1.5px) 0 0 / 5px 7px, radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.6px) 2px 3px / 9px 11px, #DEDEDA }
.mw-close, .mw-draw { background: var(--sf-steel) }                    /* the steel plate the bead is laid on; the drawing on the bench */
.mw-foot { background: var(--sf-concrete) }

/* ── 10/20: job jackets on the shop counter, Kevin's newest photos clipped to each (on the steel counter) ── */
.mw-jobs { padding: clamp(64px, 8vw, 104px) 0; background: var(--sf-steel) }
.mw-jobs-h { margin: 0 0 30px; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: .01em; color: var(--ink) }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) }
.jacket { position: relative; padding: 34px clamp(18px, 2.4vw, 28px) 24px; background: #EBDDBB; border-radius: 4px 12px 6px 6px;
  box-shadow: inset 0 0 0 1px rgba(110, 84, 40, .18), 0 24px 44px -30px rgba(30, 34, 38, .55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 40%), repeating-linear-gradient(0deg, rgba(120, 90, 40, .035) 0 2px, transparent 2px 6px) }
.jk-tab { position: absolute; left: 18px; top: -14px; padding: 6px 14px 5px; background: #E2D0A6; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 1px rgba(110, 84, 40, .2) }
.jk-tab span { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-txt) }
.jk-t { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.1; color: var(--ink) }
.jk-d { margin: 8px 0 18px; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #3A3428 }
.jk-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start }
.jacket.n1 .jk-prints { grid-template-columns: minmax(0, 220px) }
.jk-print { position: relative; display: block; padding: 7px 7px 9px; background: #fff; box-shadow: 0 10px 18px -12px rgba(30, 34, 38, .55); transition: transform .35s var(--ease-out, ease-out) }
.jk-print:nth-child(1) { transform: rotate(-1.4deg) } .jk-print:nth-child(2) { transform: rotate(.8deg) } .jk-print:nth-child(3) { transform: rotate(-.6deg) }
.jk-print:hover, .jk-print:focus-visible { transform: rotate(0) translateY(-3px) }
.jk-print img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover }
.jk-clip { position: absolute; left: 50%; top: -9px; z-index: 2; width: 14px; height: 26px; margin-left: -7px; border: 2.5px solid #9AA2A9; border-radius: 7px; border-bottom-color: transparent }
.jk-note { margin: 26px 0 0; font-size: 15px; color: var(--body, #3E4348) }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr } }
@media (max-width: 420px) { .jk-prints { gap: 8px } .jk-print { padding: 5px 5px 7px } }
.jacket.land .jk-print img { aspect-ratio: 4 / 3 }
.jk-d { font-size: 17px }

/* ── 10/22: Kevin's emailed originals, full size. A riveted tag names the boat on the hero photo; the porthole links to the
   whole job; the pilot house is framed from its roof on /services; on /projects the OSCAR jacket spans the counter with big
   prints and carries the one CTA (it opens the chat on boats) ── */
.mw-hero-ph { position: relative }
.mw-tag { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 9px 14px 8px 30px; font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  background: radial-gradient(circle at 15px 50%, #FAFBFB 0 1.5px, #8E959B 3.6px, rgba(142, 149, 155, 0) 4.3px), linear-gradient(175deg, #F4F5F6, #D8DCDF); background-color: #E4E7E9;
  box-shadow: 0 10px 18px -12px rgba(30, 34, 38, .7), inset 0 0 0 1px rgba(30, 34, 38, .16) }   /* a stamped aluminum tag, one rivet */
.mw-tag b { font-weight: 600; color: var(--accent-txt) }
.mw-port .tlink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--accent-txt); text-decoration: underline; text-underline-offset: 4px }
.mw-svc-ph .at-top img { object-position: 50% 16% }
.jacket { scroll-margin-top: 124px }
.jacket.wide { grid-column: 1 / -1 }
.jacket.wide .jk-d { max-width: 62ch }
.jacket.wide .jk-prints { gap: clamp(12px, 1.8vw, 24px) }
.jacket.n1.land .jk-prints { grid-template-columns: minmax(0, 320px) }
.jk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed rgba(110, 84, 40, .38) }
body.light .jk-cta p { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.15; color: var(--ink) }
.jk-cta .btns { margin: 0 }
@media (max-width: 600px) {
  .mw-tag { left: 10px; bottom: 10px; padding: 8px 12px 7px 27px; background-position: -2px 0, 0 0 }
  .jacket.wide .jk-prints { grid-template-columns: 1fr 1fr }
  .jacket.wide .jk-print:first-child { grid-column: 1 / -1 }
}
@media (max-width: 760px) { .mw-port { padding-bottom: 96px } }   /* the link is the last line on a phone: keep it off the boot stripe */