/* ═══════════════════════════════════════════════════════
   ULTIMATE PARTNERS GROUP — Design System v2.0
   CI: eMarkus Precision  |  May 2026
═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --black:  #0A0A0A;
  --dark:   #141414;
  --sand:   #A09280;
  --lime:   #C2FF00;
  --warm:   #F5F0EB;
  --bg:     #F5F2EE;
  --bg2:    #EEEAE4;
  --panel:  #FFFFFF;
  --text:   #0A0A0A;
  --muted:  #555555;
  --faint:  #888888;
  --border: #DDDDDD;
  --gold:   #A09280;
  --shadow: 0 2px 16px rgba(0,0,0,.06), 0 .5px 2px rgba(0,0,0,.04);
  --r:      14px;
  --max:    1220px;
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{width:min(var(--max),calc(100% - 32px));margin:auto;}

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar-wrap{padding:16px 0 0;position:sticky;top:0;z-index:100;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;border-radius:12px;border:.5px solid rgba(255,255,255,.1);background:rgba(10,10,10,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 24px rgba(0,0,0,.18);}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(194,255,0,.55);flex-shrink:0;}
.brand-text{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);white-space:nowrap;}
.icon-row,.contact-icons{display:flex;flex-wrap:wrap;gap:8px;}
.icon-link{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:all .2s;}
.icon-link:hover{transform:translateY(-2px);border-color:rgba(194,255,0,.5);background:rgba(194,255,0,.08);}
.icon-link img{width:20px;height:20px;object-fit:contain;filter:brightness(1.5) contrast(1.3);}

/* ── HERO ───────────────────────────────────────────── */
.hero{background:var(--black);min-height:90vh;display:flex;align-items:center;padding:28px 0 48px;}
.hero-card{border-radius:18px;border:.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.4);width:100%;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;}
.hero-left{padding:64px 58px;}
.hero-right{position:relative;min-height:680px;background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.88)),url('photos/hero-battery.jpg') center/cover no-repeat;}
.hero-right.hero-head-visible{background-position:32% center!important;}
.hero-overlay,.story-content{position:absolute;left:20px;right:20px;bottom:20px;padding:20px;border-radius:12px;background:rgba(10,10,10,.7);border:.5px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);}
.eyebrow,.kicker{display:inline-flex;padding:8px 12px;border-radius:999px;border:.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);}
.kicker-pill{display:inline-flex;padding:6px 12px;border-radius:999px;border:.5px solid rgba(160,146,128,.3);background:rgba(160,146,128,.08);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);}
h1{margin:22px 0 0;font-size:clamp(44px,7vw,80px);line-height:.92;letter-spacing:-.055em;font-weight:900;color:var(--warm);}
.hero .lead{margin-top:20px;max-width:600px;font-size:17px;line-height:1.8;color:rgba(245,240,235,.65);}
.hero-points,.pill-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;}
.hero-points span,.pill-row span{padding:8px 12px;border-radius:999px;border:.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:12px;color:rgba(245,240,235,.75);}
.nav-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.nav-mini a{font-size:12px;padding:8px 12px;border:.5px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:var(--warm);transition:all .2s;}
.nav-mini a:hover{border-color:rgba(194,255,0,.4);background:rgba(194,255,0,.06);color:var(--lime);}
.hero-overlay .card-label,.story-content .card-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:8px;display:block;}
.hero-overlay p,.story-content p{color:rgba(245,240,235,.7);font-size:13px;line-height:1.7;margin:0;}
.story-content h3{margin:8px 0;font-size:26px;line-height:1.05;letter-spacing:-.04em;color:var(--warm);font-weight:800;}

/* ── SECTIONS ───────────────────────────────────────── */
.section{padding:56px 0 40px;background:var(--bg);}
.section-header{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:end;margin-bottom:24px;}
.large-heading{margin:0;font-size:clamp(32px,4.5vw,60px);line-height:.95;letter-spacing:-.05em;font-weight:900;color:var(--black);}
.section-copy{color:var(--muted);font-size:16px;line-height:1.85;max-width:680px;}
.section-copy strong{color:var(--black);}
.card-label,.form-label,.contact-label,.address-label{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:6px;}

/* ── GRIDS ──────────────────────────────────────────── */
.grid-2,.grid-3,.grid-4{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ── CARDS ──────────────────────────────────────────── */
.card{padding:22px;border-radius:var(--r);border:.5px solid var(--border);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;}
.card.emphasis{border-color:rgba(160,146,128,.35);background:linear-gradient(135deg,rgba(160,146,128,.07),#fff 40%);}
.card h3,.proof-body h3{margin:10px 0 12px;font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--black);}
.card p,.proof-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;}
.cta-link{display:inline-flex;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--black);border-bottom:1.5px solid var(--sand);padding-bottom:2px;transition:border-color .2s;}
.cta-link:hover{border-color:var(--lime);}
.price{font-size:36px;line-height:1;letter-spacing:-.04em;font-weight:900;color:var(--black);margin:12px 0;}
.safe-line{margin-top:10px;color:var(--faint);font-size:12px;line-height:1.65;}
.caption-note{color:var(--faint);font-size:12px;line-height:1.65;margin-top:8px;}
.muted{color:var(--muted);}
.small-note{color:var(--faint);font-size:12px;line-height:1.65;}
.card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.7;}
.card li{margin:4px 0;}

/* ── PROOF / STORY ──────────────────────────────────── */
.proof-card{border-radius:var(--r);border:.5px solid var(--border);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;}
.proof-image{height:260px;background-size:cover;background-position:center;}
.proof-image.proof-top{background-position:center top!important;}
.proof-image.top{background-position:center top;}
.proof-image.founder-full{background-image:url('photos/markus-founder.jpg')!important;background-size:contain!important;background-repeat:no-repeat!important;background-color:#07090d!important;background-position:center!important;border-radius:14px 14px 0 0;}
.proof-body{padding:20px;}
.story-card{position:relative;min-height:480px;background-size:cover;background-position:center;border-radius:var(--r);border:.5px solid var(--border);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.14);}
.story-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.82));}
.story-content{z-index:1;}

/* ── PRODUCT IMAGES ─────────────────────────────────── */
.product-img{border-radius:10px;margin-bottom:14px;aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--bg2);border:.5px solid var(--border);}
.product-img.contain{object-fit:contain;background:var(--bg2);padding:8px;}
.product-img.solax{object-fit:contain;background:#F4F4F0;padding:18px;}

/* ── FORMS ──────────────────────────────────────────── */
.form-box{padding:22px;border-radius:var(--r);border:.5px solid var(--border);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;}
.form-title{margin:10px 0 12px;font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--black);}
.form-copy{margin:0;color:var(--muted);font-size:14px;line-height:1.75;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.form-field{display:grid;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field input,.form-field select,.form-field textarea{width:100%;border:.5px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit;font-size:13px;outline:none;transition:border-color .15s;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--sand);}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--faint);}
.form-field textarea{min-height:110px;resize:vertical;}
.form-actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.application-cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;border:none;background:var(--black);color:var(--warm);font:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .15s;}
.application-cta:hover{background:var(--dark);transform:translateY(-1px);}
.application-cta:disabled{opacity:.55;cursor:wait;}
.form-note{color:var(--faint);font-size:12px;line-height:1.65;}
.form-note strong{color:var(--black);}
.form-status{width:100%;color:var(--text);font-size:13px;line-height:1.6;opacity:.9;margin-top:10px;}
.form-status.error{color:#CC3333;}
.form-field input[type=hidden]{display:none;}

/* ── CONTACT / ADDRESS ──────────────────────────────── */
.contact-box{padding:22px;border-radius:var(--r);border:.5px solid var(--border);background:var(--panel);box-shadow:var(--shadow);}
.contact-title{margin:10px 0 12px;font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--black);}
.contact-copy{margin:0;color:var(--muted);font-size:14px;line-height:1.75;}
.contact-lines{margin-top:16px;display:grid;gap:8px;}
.contact-lines a,.contact-lines div{font-size:14px;color:var(--black);font-weight:500;}
.contact-lines a{text-decoration:underline;text-underline-offset:2px;}
.contact-lines a:hover{color:var(--sand);}
.address-box{padding:22px;border-radius:var(--r);border:.5px solid var(--border);background:var(--panel);box-shadow:var(--shadow);}
.address-title{margin:10px 0 12px;font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--black);}
.address-copy{margin:0;color:var(--muted);font-size:14px;line-height:1.75;}
.address-grid{margin-top:18px;display:grid;gap:10px;}
.address-item{padding:12px 14px;border-radius:10px;border:.5px solid var(--border);background:var(--bg);}
.address-item strong{display:block;margin-bottom:4px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);}
.address-item span{display:block;color:var(--muted);font-size:14px;line-height:1.65;}

/* ── GALLERY ────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:.5px solid var(--border);box-shadow:var(--shadow);}
.gallery img[src$="founder-full-visible.jpg"],.gallery img[src$="markus-founder.jpg"]{object-fit:contain;background:#07090d;}

/* ── MEDIA / VIDEO ──────────────────────────────────── */
.media-card-img{width:100%;height:300px;object-fit:cover;border-radius:10px 10px 0 0;border-bottom:.5px solid var(--border);}
.media-card-img.contain{object-fit:contain;background:#05070a;padding:18px;}
.video-frame{position:relative;overflow:hidden;border-radius:10px;border:.5px solid var(--border);background:var(--bg2);aspect-ratio:16/9;margin-top:16px;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.video-link{display:inline-flex;margin-top:12px;padding:10px 14px;border-radius:999px;border:.5px solid var(--border);background:var(--bg);font-size:13px;color:var(--black);transition:all .2s;}
.video-link:hover{border-color:var(--sand);color:var(--sand);}

/* ── MISC ───────────────────────────────────────────── */
.price-row{display:grid;gap:8px;margin-top:12px;}
.price-row div{padding:11px 14px;border-radius:10px;border:.5px solid var(--border);background:var(--bg);color:var(--muted);font-size:13px;}
.price-row strong{color:var(--black);}
.programme-list{display:grid;gap:8px;margin-top:12px;color:var(--muted);line-height:1.65;}
.programme-list div{padding:11px 14px;border-radius:10px;border:.5px solid var(--border);background:var(--bg);font-size:13px;}
.status-ok{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:8px;display:block;}
.split-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;}
.split-card .card,.split-card .story-card{height:100%;}

/* ── FOOTER ─────────────────────────────────────────── */
.site-footer{background:var(--black);padding:2.5rem 0 1.5rem;margin-top:56px;}
.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.footer-brand{display:flex;align-items:center;gap:8px;}
.footer-brand .dot{width:6px;height:6px;border-radius:50%;background:var(--sand);flex-shrink:0;}
.footer-brand-text{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);}
.footer-nav{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;}
.footer-nav a{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,146,128,.65);transition:color .15s;}
.footer-nav a:hover{color:var(--sand);}
.footer-nav a.privacy-link{color:rgba(194,255,0,.6);}
.footer-nav a.privacy-link:hover{color:var(--lime);}
.footer-meta{text-align:right;font-size:10px;color:rgba(160,146,128,.35);letter-spacing:.04em;}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:980px){
  .hero-grid,.section-header,.grid-2,.grid-3,.grid-4,.form-grid,.gallery,.footer-inner,.split-card{grid-template-columns:1fr;}
  .hero-right{min-height:460px;}
  .topbar{align-items:flex-start;flex-direction:column;}
  .icon-row{margin-left:0;}
  .media-card-img{height:240px;}
  .footer-inner{grid-template-columns:1fr;text-align:center;}
  .footer-nav{flex-wrap:wrap;justify-content:center;}
  .footer-meta{text-align:center;}
}
@media(max-width:640px){
  .wrap{width:min(var(--max),calc(100% - 20px));}
  .hero-left{padding:32px 24px;}
  .card,.proof-body,.form-box,.contact-box,.address-box{padding:18px;}
  .proof-image{height:200px;}
  .icon-link{width:38px;height:38px;}
  .gallery{grid-template-columns:1fr 1fr;}
}