/* Midland Custom Shop — dark cinematic design system */
:root{
  --bg:#08080a; --bg2:#0d0e11; --panel:#121317; --line:#232429;
  --steel:#9aa0a8; --txt:#eceded; --red:#a31226; --red2:#c41935;
  --oswald:'Oswald',sans-serif; --inter:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--inter);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;animation:pagefade .55s ease}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:998;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:var(--txt);text-decoration:none}
p a{color:var(--red2);text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.03em;line-height:1.12}
h1{font-size:clamp(2.1rem,6.2vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:600;margin-bottom:18px}
.section h2::after,.cta-band h2::after{content:"";display:block;width:46px;height:3px;margin-top:14px;background:linear-gradient(90deg,var(--red),var(--red2),var(--red));background-size:200% 100%;animation:lineflow 4s linear infinite}
@keyframes lineflow{0%{background-position:0 0}100%{background-position:200% 0}}
.lead{color:var(--steel);max-width:760px;margin-bottom:8px}
.split-txt p.tagline,.tagline{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.08em;color:var(--txt);font-size:1.02rem;font-weight:500}
h3{font-size:1.1rem;font-weight:600;letter-spacing:.06em}
.kicker{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.28em;font-size:.78rem;color:var(--red2);font-weight:500;margin-bottom:14px}
.accent{color:var(--red2)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(8,8,10,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo-img{height:50px;width:auto;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.foot-logo{height:64px}
.side-logo{width:230px;height:auto;margin-bottom:16px;display:block}
.brand-strip{background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-strip img{width:100%;max-height:440px;object-fit:cover;display:block}
.emblem-hero{object-position:center center}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav a:not(.btn){font-family:var(--oswald);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--steel);padding:6px 0;background:linear-gradient(var(--red2),var(--red2)) left bottom / 0% 2px no-repeat;transition:color .25s,background-size .35s ease}
.main-nav a:not(.btn):hover{color:var(--txt);background-size:100% 2px}
.main-nav a.active{color:var(--txt);background-size:100% 2px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--txt);margin:5px 0;transition:.25s}

/* Buttons */
.btn{display:inline-block;background:var(--red);color:#fff;font-family:var(--oswald);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;font-weight:600;padding:14px 28px;border:1px solid var(--red);cursor:pointer;transition:background .2s,transform .15s,box-shadow .25s;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:140%}
.btn:hover{background:var(--red2);transform:translateY(-1px);box-shadow:0 0 20px rgba(196,25,53,.42)}
.btn-ghost{background:transparent;border-color:#4a4d55;color:var(--txt)}
.btn-ghost:hover{background:rgba(200,16,46,.1);border-color:var(--red)}
.btn-sm{padding:9px 18px;font-size:.75rem}
.btn-lg{padding:17px 42px;font-size:.95rem}

/* Hero */
.hero,.page-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero{min-height:92vh}
.page-hero{min-height:52vh}
.page-hero.tall{min-height:80vh}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.6) 0%,rgba(10,10,12,.26) 42%,rgba(10,10,12,.95) 100%)}
.hero-shade-light{background:linear-gradient(180deg,rgba(10,10,12,.3) 0%,rgba(10,10,12,.08) 45%,rgba(10,10,12,.88) 100%)}
.hero-shade-heavy{background:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.72) 45%,rgba(8,8,10,.45) 100%),linear-gradient(180deg,rgba(8,8,10,.35) 0%,rgba(8,8,10,.15) 50%,rgba(8,8,10,.92) 100%)}
.hero h1,.page-hero h1{text-shadow:0 2px 34px rgba(0,0,0,.65)}
.hero-title{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:820px}
.hero-img.ken{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:center 70%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-load>*{opacity:0;transform:translateY(20px);animation:fadeup .8s ease forwards}
.hero-load>.hero-kicker{animation-delay:.1s}
.hero-load>.hero-title{animation-delay:.25s}
.hero-load>.hero-line{animation:drawline .9s ease .55s forwards;opacity:1;transform:none;width:0}
.hero-load>.hero-sub{animation-delay:.5s}
.hero-load>.hero-tag{animation-delay:.62s}
.hero-load>.hero-btns{animation-delay:.5s}
@keyframes fadeup{to{opacity:1;transform:none}}
@keyframes drawline{from{width:0}to{width:130px}}
.hero-sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.07) 50%,transparent 57%);background-size:260% 100%;background-position:130% 0;animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,18%{background-position:130% 0}60%,100%{background-position:-80% 0}}
.hero-kicker{font-size:.72rem;letter-spacing:.22em;color:#d6d9dd;display:inline-block;max-width:100%}
.hero-kicker .sep{color:var(--red2);margin:0 10px}
.hero-line{width:130px;height:2px;margin-top:10px;margin-bottom:6px;background:linear-gradient(90deg,var(--red2),transparent);position:relative}
.hero-line::after{content:"";position:absolute;top:-1.5px;left:0;width:26px;height:5px;background:var(--red2);filter:blur(4px);animation:spark 4.5s ease-in-out infinite}
@keyframes spark{0%,100%{left:0;opacity:.95}50%{left:100px;opacity:.45}}
.hero-in{position:relative;padding-top:140px;padding-bottom:72px}
.hero-tag{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1rem,2.2vw,1.35rem);color:var(--txt);margin:16px 0 8px;font-weight:500}
.hero-sub{color:#c3c7cc;max-width:620px;font-size:1.05rem}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* Sections */
.section{padding:104px 0}
.section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-rev .split-txt{order:2}.split-rev .split-img{order:1}
.split-txt p{color:var(--steel);margin-bottom:16px}
.split-txt .btn{margin-top:8px}
.split-img{position:relative}
.split-img img{width:100%;height:460px;object-fit:cover;border:1px solid var(--line)}
.split-img::after{content:"";position:absolute;inset:auto -12px -12px auto;width:52%;height:52%;border:1px solid var(--red);z-index:-1}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{background:var(--panel);border:1px solid var(--line);padding:28px 24px;display:block;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s}
.card::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--red);transition:width .35s}
.card:hover::before{width:72px}
.card:hover{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 36px rgba(163,18,38,.14);transform:translateY(-3px)}
.card h3{margin-bottom:8px}
.card p{color:var(--steel);font-size:.94rem}
.card .tag{display:inline-block;margin-top:14px;font-family:var(--oswald);text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;color:var(--red2);border:1px solid var(--red);padding:4px 10px}

/* What We Build image cards */
.wwb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.wwb{position:relative;overflow:hidden;border:1px solid var(--line);display:block;transition:transform .3s,border-color .3s}
.wwb img{width:100%;height:300px;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);transition:filter .5s ease,transform .5s ease}
.wwb:hover img,.wwb:focus img{filter:none;transform:scale(1.03)}
.wwb:hover{transform:translateY(-4px);border-color:#3a3d45}
.wwb-cap{position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;background:linear-gradient(0deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.4) 60%,transparent 100%)}
.wwb-cap h3{font-size:1rem;margin-bottom:3px}
.wwb-cap h3::before{content:"";display:inline-block;width:14px;height:2px;background:var(--red2);vertical-align:middle;margin-right:9px}
.wwb-cap p{color:#b9bdc3;font-size:.84rem;line-height:1.45}
.wwb::after,.tri::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .8s ease;pointer-events:none}
.wwb:hover::after,.tri:hover::after{background-position:-60% 0}

/* Process */
.process{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.process li{background:var(--panel);border:1px solid var(--line);padding:24px 20px}
.process li span{font-family:var(--oswald);font-size:1.6rem;font-weight:700;color:var(--red);display:block;margin-bottom:8px}
.process li h3{font-size:.95rem;margin-bottom:6px}
.process li p{color:var(--steel);font-size:.86rem}

/* Grids */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.tri{overflow:hidden;border:1px solid var(--line);transition:transform .3s,border-color .3s;position:relative}
.tri img{width:100%;height:340px;object-fit:cover;transition:transform .4s,filter .5s;filter:grayscale(1) contrast(1.06)}
.tri:hover{transform:translateY(-4px);border-color:#3a3d45}
.tri:hover img{transform:scale(1.04);filter:none}
.build-card{transition:transform .3s,border-color .3s}
.build-card:hover{transform:translateY(-4px);border-color:#3a3d45}
.center-btn{text-align:center;margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.build-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
.build-card{background:var(--panel);border:1px solid var(--line)}
.build-card img{width:100%;height:400px;object-fit:cover}
.build-card figcaption{padding:22px 24px}
.build-card p{color:var(--steel);font-size:.94rem;margin-top:6px}
.wide-img{margin-top:40px}
.wide-img img{width:100%;height:440px;object-fit:cover;object-position:center 65%;border:1px solid var(--line)}
.wide-img figcaption{color:var(--steel);font-size:.86rem;margin-top:12px;font-style:italic}

/* Services */
.svc-block{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.svc-head p:not(.kicker){color:var(--steel)}
.svc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.svc-list li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);position:relative;color:#c9ccd2;font-size:.95rem}
.svc-list li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:2px;background:var(--red)}

/* Gallery */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filter-btn{background:transparent;border:1px solid var(--line);color:var(--steel);font-family:var(--oswald);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;padding:9px 18px;cursor:pointer;transition:.2s}
.filter-btn:hover{color:var(--txt);border-color:var(--red)}
.filter-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g-item{overflow:hidden;border:1px solid var(--line);position:relative}
.g-label{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;background:linear-gradient(0deg,rgba(5,5,6,.88) 0%,transparent 100%);font-family:var(--oswald);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:#fff;text-align:left;pointer-events:none}
.g-label::before{content:"";display:inline-block;width:14px;height:2px;background:var(--red);vertical-align:middle;margin-right:9px}
.g-item.hide{display:none}
.g-open{border:0;padding:0;background:none;cursor:zoom-in;width:100%;display:block}
.g-item img{width:100%;height:320px;object-fit:cover;transition:transform .4s}
.g-item:hover img{transform:scale(1.04)}
.gallery-note{color:var(--steel);font-size:.9rem;margin-top:28px;text-align:center}
.lightbox{position:fixed;inset:0;background:rgba(5,5,6,.95);z-index:1000;display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lightbox.open{display:flex}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.lightbox img{max-width:100%;max-height:84vh;object-fit:contain}
.lb-cap{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.24em;font-size:.74rem;color:#fff}
.lb-cap::before{content:"";display:inline-block;width:16px;height:2px;background:var(--red2);vertical-align:middle;margin-right:10px}
.lb-close{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(21,22,26,.75);border:1px solid var(--line);color:#fff;font-size:2rem;line-height:1;width:52px;height:64px;cursor:pointer;transition:border-color .2s,background .2s;z-index:2}
.lb-nav:hover{border-color:var(--red);background:rgba(163,18,38,.25)}
.lb-prev{left:14px}.lb-next{right:14px}

/* CTA band */
.cta-band{background:linear-gradient(90deg,#131014,#180d10),var(--bg2);border-top:1px solid var(--line);padding:64px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-in h2{margin-bottom:6px}
.cta-in p{color:var(--steel)}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.inquiry-form{background:var(--panel);border:1px solid var(--line);padding:36px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label,.files legend{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--steel);margin-bottom:7px}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:12px 14px;font-family:var(--inter);font-size:.95rem;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.files{border:1px dashed var(--line);padding:16px}
.files input{margin:8px 0;border:0;padding:4px 0}
.form-note{color:var(--steel);font-size:.85rem;margin-top:16px}
.hidden-field{display:none}
.contact-side figure{border:1px solid var(--line);margin-bottom:22px}
.contact-side img{width:100%;height:300px;object-fit:cover}
.contact-side p{color:var(--steel);margin-bottom:12px}
.foot-h{font-family:var(--oswald);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--txt);margin:18px 0 8px}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#060608;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px}
.foot-tag{color:var(--steel);font-size:.9rem;margin:14px 0 8px}
.foot-meta{color:#6b7078;font-size:.82rem}
.foot-meta a{color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.foot-nav a,.foot-social a:not(.btn){color:var(--steel);font-size:.9rem;transition:color .2s}
.foot-nav a:hover,.foot-social a:not(.btn):hover{color:var(--txt)}
.foot-social a:not(.btn){display:inline-block;margin-right:16px;margin-bottom:14px}
.foot-base{border-top:1px solid var(--line);padding-top:20px;padding-bottom:20px}
.foot-base p{color:#5a5f66;font-size:.78rem}

/* Floating CTA + Build modal */
.fab{position:fixed;right:20px;bottom:20px;z-index:900;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(196,25,53,.4);padding:13px 22px;font-size:.78rem}
.modal{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;background:rgba(5,5,6,.92);padding:18px}
.modal.open{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);max-width:660px;width:100%;max-height:92vh;overflow-y:auto;padding:34px;position:relative;animation:modalin .3s ease}
@keyframes modalin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:10px;right:16px;background:none;border:0;color:var(--steel);font-size:2rem;cursor:pointer;line-height:1}
.modal-close:hover{color:#fff}
.modal-box h2{font-size:1.6rem}

/* Reveal: blur wipe */
.reveal{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity .8s ease,transform .8s ease,filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:none}
.sr-item{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.sr-item.in{opacity:1;transform:none;filter:none}

/* Page transitions + scroll progress */
@keyframes pagefade{from{opacity:0}to{opacity:1}}
body.page-out{opacity:0;transition:opacity .22s ease}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--red),var(--red2));z-index:1300;box-shadow:0 0 8px rgba(196,25,53,.7)}

@media (prefers-reduced-motion:reduce){
  .reveal,.sr-item{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
  .hero-img.ken,.hero-line::after,.hero-sweep,.section h2::after,.cta-band h2::after,body{animation:none}
  .hero-load>*{opacity:1;transform:none;animation:none}
  .hero-load>.hero-line{width:130px}
  .wwb img,.tri img{filter:none}
  .btn::after,.wwb::after,.tri::after{display:none}
}

/* Responsive */
@media(max-width:960px){
  .card-grid,.tri-grid,.gallery-grid,.wwb-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .split,.svc-block,.contact-grid,.build-grid{grid-template-columns:1fr;gap:36px}
  .split-rev .split-txt{order:1}.split-rev .split-img{order:2}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  .main-nav{position:fixed;top:72px;left:0;right:0;background:#0a0a0d;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:20px 24px 26px;gap:16px;display:none}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{min-height:78vh}
  .hero-in{padding-top:110px;padding-bottom:52px}
  .section{padding:64px 0}
  .split-img img{height:320px}
  .build-card img{height:300px}
  .wide-img img{height:280px}
  .g-item img{height:240px}
  .form-row{grid-template-columns:1fr}
  .inquiry-form{padding:24px 18px}
  .cta-in{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .card-grid,.tri-grid,.gallery-grid,.process,.wwb-grid{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  .tri img{height:260px}
  .wwb img{height:240px}
  h1{font-size:clamp(1.9rem,9vw,2.5rem)}
  .hero-title{font-size:clamp(1.5rem,7.6vw,2.1rem)}
  .hero-tag{font-size:.92rem;letter-spacing:.08em}
  .hero-sub{font-size:.95rem}
  .hero-kicker{font-size:.6rem;letter-spacing:.14em}
  .hero-kicker .sep{margin:0 6px}
  .kicker{letter-spacing:.18em;font-size:.7rem}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{text-align:center;width:100%}
  .cta-btns{width:100%;flex-direction:column}
  .cta-btns .btn{text-align:center}
  .logo-img{height:38px}
  .foot-logo{height:52px}
  .brand-strip img{max-height:220px}
  .fab{right:12px;bottom:12px;padding:11px 16px;font-size:.72rem}
  .lb-nav{width:40px;height:52px;font-size:1.5rem}
  .modal-box{padding:24px 16px}
}