/* Alpine Pumps — visual system (adapted from the DKF "Moderne" editorial template)
   Plain HTML/CSS, framework-free, ready to port to Astro components. */

@font-face{font-family:'Capitana';src:url('fonts/Capitana-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Capitana';src:url('fonts/Capitana-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Capitana';src:url('fonts/Capitana-Extrabold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Capitana';src:url('fonts/Capitana-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bourton';src:url('fonts/BourtonBase.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#F3F3F4; --bg2:#EAEAEC; --card:#FBFBFC;
  --border:rgba(20,20,22,0.12); --border2:rgba(20,20,22,0.2);
  --ink:#18181B; --muted:rgba(24,24,27,0.6); --faint:rgba(24,24,27,0.4);
  --accent:#C51A1A; --accent-deep:#9E1414; --accent2:#B8860B;
  --sans:'Capitana','Space Grotesk',system-ui,sans-serif;
  --serif:'Capitana','Instrument Serif',Georgia,serif;
  --display:'Capitana','Space Grotesk',system-ui,sans-serif;
  --mono:'Bourton','JetBrains Mono',ui-monospace,monospace;
  --maxw:1320px; --pad:48px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color .16s}
a:hover{color:var(--accent-deep)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.ital{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,243,244,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:40px;padding:14px var(--pad)}
.nav-logo{display:block;height:44px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:32px;margin-left:24px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--muted);padding:4px 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.nav-cta{margin-left:auto}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:8px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;border-radius:999px;font-family:var(--sans);font-weight:600;cursor:pointer;border:0;text-decoration:none;transition:filter .18s,transform .18s,box-shadow .18s,color .18s,border-color .18s}
.btn svg{flex:none}
.btn-primary{background:var(--accent);color:#fff;padding:11px 20px;font-size:14px}
.btn-primary:hover{color:#fff;filter:brightness(1.08);transform:scale(1.03);box-shadow:0 0 26px 6px rgba(197,26,26,0.35)}
.btn-lg{padding:19px 26px;font-size:16px;justify-content:space-between;min-width:300px}
.btn-ink{background:var(--ink);color:#F3F3F4}
.btn-ink:hover{color:#F3F3F4;filter:brightness(1.4);transform:scale(1.02);box-shadow:0 0 26px 6px rgba(24,24,27,0.22)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border2)}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.02);box-shadow:0 0 26px 6px rgba(197,26,26,0.28)}

/* ---------- Section furniture ---------- */
section{position:relative}
.seclabel{display:flex;align-items:baseline;gap:24px;font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:56px}
.seclabel .rule{flex:1;height:1px;background:var(--border);align-self:center}
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:36px}
.kicker .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);flex:none}
.display{line-height:1.12;letter-spacing:-2px;font-family:var(--display);font-weight:800;color:var(--ink)}
h1.display{font-size:clamp(40px,6vw,73px)}
h2.display{font-size:clamp(34px,5vw,64px)}
.lead{font-size:21px;line-height:1.5;color:var(--muted)}
.border-b{border-bottom:1px solid var(--border)}
.bg2{background:var(--bg2)}

/* ---------- Page hero (inner pages) ---------- */
.pagehero{padding:88px var(--pad) 72px;overflow:hidden;border-bottom:1px solid var(--border)}
.grid-bd{position:absolute;inset:0;background-image:radial-gradient(circle,var(--accent) 1px,transparent 1.2px);background-size:38px 38px;opacity:.16;-webkit-mask-image:radial-gradient(ellipse at top left,#000 20%,transparent 65%);mask-image:radial-gradient(ellipse at top left,#000 20%,transparent 65%)}
.pagehero .wrap{position:relative}
.pagehero h1{max-width:1100px;margin-top:0}
.pagehero .lead{margin-top:36px;max-width:720px}
.pagehero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:center}
.pagehero-txt{min-width:0}
.pagehero-img{width:126%;max-width:none;max-height:440px;height:auto;object-fit:contain;object-position:right center;margin:0 0 0 -26%;filter:drop-shadow(0 24px 44px rgba(24,24,27,0.26))}
.pagehero-img-lg{width:126%;max-height:440px;margin:0 0 0 -26%}
.pagehero-img-xl{width:126%;max-height:440px;margin:0 0 0 -26%}

/* ---------- Home hero ---------- */
.hero{padding:80px var(--pad);overflow:hidden}
.hero .grid-bd{-webkit-mask-image:radial-gradient(ellipse at top,#000 30%,transparent 70%);mask-image:radial-gradient(ellipse at top,#000 30%,transparent 70%)}
.hero .wrap{position:relative}
.hero h1{margin:0}
.hero-sub{display:grid;grid-template-columns:1.2fr 0.9fr;gap:64px;margin-top:48px;align-items:center}
.hero-sub p{font-size:22px;line-height:1.45;color:var(--muted);max-width:600px}
.hero-img{width:190%;max-width:none;height:auto;object-fit:contain;margin:-320px -20% -40px -35%}
.hero-actions{display:flex;flex-direction:column;gap:20px}
.rotator{display:inline-block;min-width:6ch;animation:fadeUp .6s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Products (home) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.prod-card{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:border-color .22s,transform .22s,box-shadow .22s}
.prod-card:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(197,26,26,0.2),0 0 0 1px var(--accent)}
.prod-media{position:relative;height:280px;overflow:hidden;background:#fff}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.prod-card:hover .prod-media img{transform:scale(1.04)}
.prod-tag{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--mono);font-size:11px;color:#fff;letter-spacing:1px;background:var(--accent);padding:5px 10px;border-radius:4px}
.prod-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod-body h3{font-size:28px;font-weight:600;letter-spacing:-0.6px}
.prod-body p{font-size:15px;line-height:1.55;color:var(--muted)}
.prod-more{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--accent)}

/* ---------- Our pumps (interactive list) ---------- */
.pumps-list{border-top:1px solid var(--border)}
.pump-row{display:grid;grid-template-columns:1fr minmax(280px,340px);align-items:center;gap:40px;position:relative;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none}
.pump-name{position:relative;z-index:1;font-family:var(--display);font-weight:800;font-size:clamp(52px,9vw,132px);line-height:1.02;letter-spacing:-2px;color:#c9c9cc;transition:color .3s ease}
.pump-row:hover .pump-name{color:var(--ink)}
.pump-float{position:absolute;left:24%;top:50%;width:clamp(240px,27vw,440px);height:auto;transform:translateY(-50%) scale(.86) rotate(-6deg);opacity:0;pointer-events:none;z-index:5;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 24px 40px rgba(24,24,27,0.28))}
.pump-row:hover .pump-float{opacity:1;transform:translateY(-50%) scale(1) rotate(0deg)}
.pump-float-lg{width:clamp(210px,24vw,360px)}
.pump-float-cm{width:clamp(170px,19vw,290px)}
.pump-float-sm{width:clamp(200px,22vw,360px)}
.pump-desc{font-size:17px;line-height:1.5;color:var(--muted);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease;text-wrap:pretty}
.pump-row:hover .pump-desc{opacity:1;transform:translateX(0)}

/* ---------- Values / forces ---------- */
.forces{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin-top:56px}
.force{padding:36px 28px 40px;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:260px}
.force:last-child{border-right:0}
.force .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:1px;margin-bottom:28px}
.force h3{font-size:24px;font-weight:500;letter-spacing:-0.5px;margin-bottom:18px}
.force p{font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:start}
.about-grid p{font-size:19px;line-height:1.65;color:var(--muted)}
.about-grid .stress{color:var(--ink)}
.about-img{width:100%;height:460px;object-fit:cover;border:1px solid var(--border2);border-radius:6px}

/* ---------- Timeline ---------- */
.timeline{border-top:1px solid var(--border);margin-top:8px}
.tl-row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:32px 8px;border-bottom:1px solid var(--border);align-items:baseline}
.tl-year{font-family:var(--mono);font-size:32px;font-weight:500;color:var(--accent);letter-spacing:-1px}
.tl-body h3{font-size:22px;font-weight:500;letter-spacing:-0.4px;margin-bottom:8px}
.tl-body p{font-size:15.5px;line-height:1.55;color:var(--muted)}

/* ---------- Timeline (horizontal) ---------- */
.timeline-h{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:24px;padding-top:56px}
.tl-line{position:absolute;top:0;left:0;right:0;height:2px;background:var(--ink)}
.tl-h-item{position:relative}
.tl-dot{position:absolute;top:-56px;left:0;transform:translateY(-50%);width:16px;height:16px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px var(--bg2)}
.tl-h-year{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--accent);letter-spacing:-1px;margin-bottom:14px}
.tl-h-item h3{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-0.4px;margin-bottom:8px}
.tl-h-item p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* ---------- Split band (repair on home) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-img{width:100%;height:420px;object-fit:cover;border:1px solid var(--border2);border-radius:6px}

/* ---------- Service cards (repair page) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.svc-media{height:220px;overflow:hidden;background:var(--bg2);position:relative}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc-card:hover .svc-media img{transform:scale(1.05)}
.svc-body{padding:26px 28px 30px}
.svc-body h3{font-size:23px;font-weight:500;letter-spacing:-0.4px;margin-bottom:12px}
.svc-body p{font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- Product detail spec blocks ---------- */
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0;border-bottom:1px solid var(--border)}
.spec-row.rev .spec-media{order:2}
.spec-media{border:1px solid var(--border2);border-radius:6px;overflow:hidden;background:#fff;position:relative;min-height:420px}
.spec-media img{width:100%;height:420px;object-fit:cover}
.spec-txt h2{font-size:40px;font-weight:500;letter-spacing:-1px;margin-bottom:24px}
.spec-txt .seclabel{margin-bottom:24px}
.spec-list{margin-top:8px}
.spec-list li{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);font-size:16.5px;color:var(--ink)}
.spec-list li::before{content:"→";color:var(--accent);font-size:16px;font-weight:700;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:9px 16px}
.spectable{width:100%;border-top:1px solid var(--border)}
.spectable div{display:grid;grid-template-columns:0.9fr 1.1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--border)}
.spectable .k{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.spectable .v{font-size:17px;color:var(--ink);line-height:1.4}
.intro-lead{font-size:22px;line-height:1.55;color:var(--muted);max-width:820px}

/* ---------- Image failure placeholder ---------- */
.imgfail>img{display:none}
.prod-media.imgfail::after,.svc-media.imgfail::after,.spec-media.imgfail::after,.imgph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--faint);background:repeating-linear-gradient(135deg,var(--bg2) 0 16px,rgba(255,255,255,0.03) 16px 17px)}
.imgph{position:relative;overflow:hidden}

/* ---------- Contact / CTA ---------- */
.ctaband{padding:120px var(--pad);overflow:hidden;border-bottom:1px solid var(--border)}
.ctaband .glow{position:absolute;inset:0;background-image:radial-gradient(circle at 75% 30%,rgba(197,26,26,0.12),transparent 50%)}
.ctaband .wrap{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:flex-start}
.contact-phone{font-size:32px;font-weight:500;letter-spacing:-0.6px;color:var(--ink)}
.form{background:var(--card);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -18px rgba(24,24,27,0.18)}
.form .field{padding:24px 28px;border-bottom:1px solid var(--border)}
.form label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--faint);text-transform:uppercase;margin-bottom:12px}
.form input,.form textarea{width:100%;border:0;outline:none;background:transparent;color:var(--ink);font-family:var(--sans);font-size:18px}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form .proc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.form .proc input{font-size:16px;border-bottom:1px solid var(--border);padding:8px 0}
.form textarea{font-size:17px;resize:vertical}
.form-foot{padding:16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:14px}
.form-foot .note{font-size:13px;color:var(--muted);padding-left:12px}
.form-foot .btn{margin-left:auto}

/* ---------- Footer ---------- */
.foot{padding:56px var(--pad) 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot-logo{height:64px;width:auto;margin-bottom:20px}
.foot p{font-size:14px;line-height:1.6;color:var(--muted);max-width:340px}
.foot h4{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:18px}
.foot li a{display:block;padding:6px 0;font-size:14px;color:var(--ink)}
.foot li a:hover{color:var(--accent)}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.6px}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:marquee 30s linear infinite}
.marquee-item{flex:none;display:flex;align-items:center;gap:14px;padding:14px 24px;background:var(--card);border:1px solid var(--border);border-radius:999px;font-size:15px;color:var(--muted);white-space:nowrap}
.marquee-item b{color:var(--ink);font-weight:600}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  :root{--pad:24px}
  .nav-links,.nav-cta{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--bg);border-bottom:1px solid var(--border);padding:8px var(--pad) 16px}
  .nav-links.open a{padding:14px 0;border-bottom:1px solid var(--border)}
  .nav-toggle{display:block}
  .hero-sub,.about-grid,.split,.contact-grid,.spec-row,.spec-row.rev,.pagehero-grid{grid-template-columns:1fr;gap:36px}
  .pagehero-img{width:100%;margin:0}
  .pagehero-img-lg,.pagehero-img-xl{width:100%;margin:0}
  .hero-img{width:100%;margin:12px 0 0 0}
  .spec-row.rev .spec-media{order:0}
  .prod-grid,.svc-grid,.forces{grid-template-columns:1fr}
  .force{border-right:0;border-bottom:1px solid var(--border);min-height:0}
  .pump-row{grid-template-columns:1fr;gap:0;padding:20px 0}
  .pump-desc{display:none}
  .pump-float{left:auto;right:0;width:120px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tl-row{grid-template-columns:100px 1fr}
  .timeline-h{display:block;padding-top:0;margin-top:8px}
  .tl-line{display:none}
  .tl-h-item{padding:22px 0 22px 28px;border-bottom:1px solid var(--border)}
  .tl-dot{position:absolute;top:30px;left:0;transform:none;box-shadow:0 0 0 4px var(--bg2)}
  .tl-h-year{font-size:26px;margin-bottom:8px}
  .btn-lg{min-width:0;width:100%}
}