/* Losch Machine Inc. - brand tokens from Brand Identity Standards v2.0 */
:root{
  --midnight:#12202E; --deep:#1B2A3A; --copper:#C8823A; --steel:#708794; --offwhite:#F4F2EE; --white:#fff;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",Arial,Helvetica,sans-serif;
  --wrap:1160px;
  --rule:rgba(18,32,46,.2);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--midnight);background:var(--offwhite);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.band-dark :focus-visible,.band-deep :focus-visible,.band-photo :focus-visible,.site-footer :focus-visible{outline-color:var(--copper)}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--midnight);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:0}

/* type */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;margin:0}
h1{font-weight:800;font-size:clamp(2.75rem,6.4vw,5.25rem);line-height:.96;letter-spacing:.005em}
h2{font-weight:700;font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.05;letter-spacing:.06em;margin-bottom:1rem}
h3{font-weight:600;font-size:1.125rem;line-height:1.2;letter-spacing:.1em;margin-bottom:.4rem}
p{margin:0 0 1rem;max-width:62ch}
.muted{color:var(--deep);opacity:.78}
.prose p{font-size:1.125rem}

/* bands */
.band-dark{background:var(--midnight);color:#fff}
.band-deep{background:var(--deep);color:#fff}
.band-white{background:var(--offwhite);border-top:1px solid rgba(18,32,46,.14);border-bottom:1px solid rgba(18,32,46,.14)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--offwhite);border-bottom:3px solid var(--copper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.brand{display:block;line-height:0;text-decoration:none}
.brand img{height:58px;width:auto}
.logo-fallback{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.14em;color:var(--midnight)}
.site-footer .logo-fallback{color:#fff}
.nav{display:flex;align-items:center;gap:2rem}
.nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav ul a:hover,.nav ul a[aria-current="page"]{border-bottom-color:var(--copper)}
.nav-toggle{display:none;font:600 1rem var(--display);letter-spacing:.1em;text-transform:uppercase;background:none;border:2px solid var(--midnight);color:var(--midnight);padding:.45rem .9rem;cursor:pointer}

/* buttons: square, brand-approved color pairs only */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.125rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.8rem 1.6rem;border:2px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.btn-copper{background:var(--copper);color:var(--midnight);border-color:var(--copper)}
.btn-copper:hover{filter:brightness(1.07)}
.btn-dark{background:var(--midnight);color:#fff;border-color:var(--midnight)}
.btn-dark:hover{background:var(--deep);border-color:var(--deep)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem}
.textlink{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--copper);text-decoration:none;padding-bottom:.1rem}

/* hero */
.hero{padding:clamp(4rem,9vw,7.5rem) 0;min-height:min(36rem,80vh);display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(18,32,46,.97) 0%,rgba(18,32,46,.9) 42%,rgba(18,32,46,.5) 72%,rgba(18,32,46,.22) 100%),url(images/hero-shop.jpg) left 38%/118% auto no-repeat,var(--midnight)}
.hero-copy{max-width:var(--wrap)}
.hero-copy h1{max-width:15ch;text-wrap:balance}
.hero-copy .hero-sub{max-width:48ch}
.hero-sub{font-size:1.1875rem;color:rgba(255,255,255,.86);margin:1.75rem 0 2.25rem;max-width:56ch}
.page-head{padding:clamp(3rem,6vw,5rem) 0}
.page-head .hero-sub{margin-bottom:0}

/* proof strip */
.proof{border-top:1px solid rgba(255,255,255,.08);padding:2.25rem 0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.proof h2{font-size:1.5rem;margin-bottom:.25rem}
.proof p{color:rgba(255,255,255,.74);margin:0;font-size:1.0625rem}

/* layouts */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.rules{list-style:none;margin:0;padding:0;border-top:2px solid var(--copper)}
.rules li{padding:.7rem 0;border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.25;letter-spacing:.03em;text-transform:uppercase}
.rules.cols-2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2.5rem}
.prose + .rules,p.prose + .rules{margin-top:1.5rem}
.rows{border-top:2px solid var(--copper);margin-top:1.25rem}
.rows>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.rows h3{margin:.2rem 0 0}
.rows p{margin:0}
.rows.tight{margin-top:0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-top:2px solid var(--copper);padding-top:1.25rem;margin-top:1.25rem}
.trio p{margin:0}
.plain{list-style:none;margin:0;padding:0;border-top:2px solid var(--copper)}
.plain li{padding:.65rem 0;border-bottom:1px solid var(--rule)}

/* equipment tables */
.equip{display:grid;align-items:start;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:1.5rem}
table.spec{width:100%;border-collapse:collapse;border-top:2px solid var(--copper)}
.spec caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:.6rem}
.spec th{font-family:var(--display);font-weight:600;font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:.6rem .75rem;background:var(--deep);color:#fff}
.spec td{padding:.65rem .75rem;border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.spec .qty{text-align:right;width:5rem}
.spec tbody tr:nth-child(even){background:var(--offwhite)}

/* CTA band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{margin-bottom:.5rem}
.lead-on-dark{color:rgba(255,255,255,.86);margin:0;max-width:52ch}

/* RFQ form */
.rfq-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(2rem,5vw,5rem);align-items:start}
.rfq fieldset{border:0;border-top:2px solid var(--copper);margin:0 0 2.5rem;padding:1rem 0 0;min-width:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem}
.rfq legend{font-family:var(--display);font-weight:700;font-size:1.375rem;letter-spacing:.1em;text-transform:uppercase;padding:0;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--deep);opacity:.7;font-family:var(--body);font-size:.9rem}
.field input,.field select,.field textarea{font:inherit;color:var(--midnight);background:#fff;border:1.5px solid var(--steel);padding:.7rem .8rem;border-radius:0;width:100%}
.field input[type=file]{padding:.55rem .6rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--midnight)}
.hint{font-size:.95rem;margin:.1rem 0 0;color:var(--deep);opacity:.8}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.rfq-side{display:grid;gap:2.5rem}
.rfq-side p{margin-bottom:.75rem}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;border-top:2px solid var(--copper)}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--midnight)}

/* footer */
.site-footer{background:var(--midnight);color:#fff;padding:3.5rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;align-items:start}
.site-footer h3{color:var(--copper);margin-bottom:.75rem}
.site-footer p{margin-bottom:.75rem;color:rgba(255,255,255,.88)}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:.45rem}
.legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14)}
.legal p{margin:0;font-weight:300;font-size:.9rem;color:rgba(255,255,255,.62)}

/* responsive */
@media (max-width:900px){
  .split,.split-even,.equip,.rfq-grid,.foot-grid{grid-template-columns:1fr}
  .proof-grid,.trio{grid-template-columns:1fr}
  .rows>div{grid-template-columns:1fr;gap:.25rem}
  .hero{background:linear-gradient(rgba(18,32,46,.9),rgba(18,32,46,.82)),url(images/hero-shop.jpg) 62% center/cover no-repeat,var(--midnight)}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--offwhite);border-bottom:3px solid var(--copper);flex-direction:column;align-items:stretch;gap:1rem;padding:1.25rem 1.5rem 1.5rem}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:.5rem}
  .brand img{height:44px}
}
@media (max-width:560px){
  .rules.cols-2{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
}

/* photos */
.photo{margin:0}
.photo img{width:100%;height:auto;object-fit:cover}
.photo figcaption{font-family:var(--display);font-weight:600;font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;color:var(--deep)}
.split > div > .photo{margin-top:2rem}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2rem}
.photo-pair img{aspect-ratio:4/3}
.photo-wide{margin-top:3rem}
.photo-wide img{aspect-ratio:21/9}
@media (max-width:560px){.photo-pair{grid-template-columns:1fr}.photo-wide img{aspect-ratio:4/3}}

/* footer photo */
.foot-photo{width:100%;max-width:440px;aspect-ratio:16/10;object-fit:cover;object-position:28% center;display:block}

/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:1.5rem;border-top:2px solid var(--copper);padding-top:1.75rem}
.person .headshot,.ph{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;margin-bottom:1rem;background:var(--deep)}
.ph{display:grid;place-items:center;color:rgba(255,255,255,.5);font-family:var(--display);font-weight:800;font-size:3.5rem;letter-spacing:.06em}
.person h3{font-size:1.5rem;letter-spacing:.04em;margin-bottom:.1rem}
.person .role{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);opacity:.8;margin-bottom:.75rem}
.person p:last-child{font-size:1rem;margin:0}
@media (max-width:1000px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team{grid-template-columns:1fr}}

/* section with the photo built into its background */
.band-photo{color:#fff;background:linear-gradient(90deg,rgba(18,32,46,.94) 0%,rgba(18,32,46,.88) 55%,rgba(18,32,46,.8) 100%),url(images/shafts.jpg) center 45%/cover no-repeat,var(--midnight)}
.band-photo .trio p{color:rgba(255,255,255,.86)}

/* bigger tap targets on touch screens */
@media (max-width:900px){
  .nav-toggle{min-height:44px;padding:.45rem 1rem}
  .nav ul a{display:block;padding:.7rem 0}
  .site-footer a,.prose a,.rfq-side a,.textlink{display:inline-block;padding-top:.6rem;padding-bottom:.6rem}
  .textlink{padding-bottom:.35rem}
  .foot-links li{margin-bottom:0}
}

/* Who we serve: dark cards */
.serve-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;margin-top:1.75rem}
.serve-card{grid-column:span 2;background:var(--midnight);color:#fff;border-top:4px solid var(--copper);padding:1.75rem 1.75rem 2.1rem;min-height:12rem}
.serve-card:nth-child(n+4){grid-column:span 3}
.serve-card h3{font-weight:700;font-size:1.625rem;line-height:1.1;letter-spacing:.06em;margin-bottom:.75rem}
.serve-card p{margin:0;color:rgba(255,255,255,.84)}
@media (max-width:900px){
  .serve-grid{grid-template-columns:repeat(2,1fr)}
  .serve-card,.serve-card:nth-child(n+4){grid-column:auto}
  .serve-card:last-child{grid-column:1 / -1}
  .serve-card{min-height:0}
}
@media (max-width:560px){.serve-grid{grid-template-columns:1fr}}

/* contact page: call card */
.call-card{display:block;background:var(--midnight);color:#fff;border-top:4px solid var(--copper);padding:2rem 2rem 1.5rem}
.call-card h2{font-size:1.5rem;color:var(--copper);margin-bottom:.75rem}
.call-card p{color:rgba(255,255,255,.88)}
.call-card a{color:#fff}
.call-card .call-number{margin:0 0 1rem}
.call-card .call-number a{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,2.5rem);line-height:1;letter-spacing:.02em;text-decoration:none}
.call-card :focus-visible{outline-color:var(--copper)}

/* page header with a photo under the navy tint */
.page-head.has-photo{background:linear-gradient(90deg,rgba(18,32,46,.93) 0%,rgba(18,32,46,.82) 55%,rgba(18,32,46,.62) 100%),var(--ph) var(--ph-pos,center 45%)/var(--ph-size,cover) no-repeat,var(--midnight)}

/* empty photo slot */
.ph-foot{display:grid;place-items:center;width:100%;max-width:440px;aspect-ratio:16/10;background:var(--deep);border:1px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.6);font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:.14em;text-transform:uppercase}

/* two-photo parts band (home) */
.mosaic2{display:grid;grid-template-columns:repeat(2,1fr)}
.mosaic2 img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media (max-width:700px){.mosaic2{grid-template-columns:1fr}}

/* About: stats band over the shop floor photo */
.stats-band{color:#fff;background:linear-gradient(90deg,rgba(18,32,46,.9),rgba(18,32,46,.78)),url(images/hero-shop.jpg) center 42%/cover no-repeat,var(--midnight)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,4.2vw,3.75rem);line-height:1;color:#fff;white-space:nowrap}
.stats span{display:block;margin-top:.4rem;font-family:var(--display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78);font-size:1.0625rem}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}}

/* equipment photo spacing */
.equip .photo{margin-top:1.5rem}

.form-status{margin:1rem 0 0;font-weight:500;color:var(--midnight)}
.form-status:empty{display:none}