/* MBP Static Site Styles */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --background: #ffffff;
  --foreground: #0f1424;
  --muted: #f4f5f9;
  --muted-foreground: #6b7280;
  --border: #e6e8ef;
  --card: #ffffff;
  --surface: #f7f8fb;
  --surface-dark: #0f1424;
  --brand: #0090ff;
  --brand-foreground: #ffffff;
  --radius: 0.9rem;
  --shadow-sm: 0 1px 2px rgba(15,20,36,.06);
  --shadow-md: 0 8px 24px rgba(15,20,36,.08);
  --shadow-xl: 0 20px 50px rgba(15,20,36,.18);
}
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* Layout */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 1.5rem; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-dark); color: #fff;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.logo-sub { font-size: 0.625rem; letter-spacing: 0.25em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.nav { display: none; align-items: center; gap: 0.25rem; }
.nav a { padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,.7); transition: color .15s, background .15s; }
.nav a:hover { color: #fff; }
.nav a.active { background: var(--brand); color: var(--brand-foreground); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; transition: opacity .2s, background .2s, transform .2s; border: 0; }
.btn-brand { background: var(--brand); color: var(--brand-foreground); }
.btn-brand:hover { opacity: 0.9; }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-white { background: #fff; color: var(--foreground); padding: 0.9rem 1.75rem; }
.btn-white:hover { background: rgba(255,255,255,.9); }
.header-cta { display: none; }

/* Hero */
.hero { background: var(--surface-dark); color: #fff; }
.hero-inner { padding-block: 6rem; display: grid; gap: 4rem; align-items: center; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); padding: 0.375rem 1rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.05em; color: rgba(255,255,255,.8); }
.hero h1 { margin-top: 2rem; font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 700; line-height: 1.05; }
.hero .lead { margin-top: 1.5rem; max-width: 32rem; font-size: 1.125rem; color: rgba(255,255,255,.7); line-height: 1.6; }
.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-features { display: grid; gap: 0.75rem; }
.hero-feature { display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); padding: 1.25rem; border-radius: 1rem; }
.icon-tile { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--brand); color: var(--brand-foreground); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tile.lg { width: 3rem; height: 3rem; }
.hero-feature-label { font-size: 1.125rem; font-weight: 600; }

/* Sections */
.section { padding: 6rem 0; }
.section.alt { background: var(--surface); }
.section.border-t { border-top: 1px solid var(--border); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.25em; color: var(--brand); text-transform: uppercase; }
.section h2 { margin-top: 1rem; font-size: clamp(1.875rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.15; }
.section .lead { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; max-width: 48rem; }

/* Service grid */
.services { margin-top: 3.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.service-card { display: block; padding: 1.75rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card h3 { margin-top: 2rem; font-size: 1.25rem; font-weight: 700; }
.service-card p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.service-card .cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--brand); }
.service-card .cta svg { transition: transform .2s; }
.service-card:hover .cta svg { transform: translateX(4px); }

/* Two-col */
.two-col { display: grid; gap: 4rem; align-items: center; }
.image-frame { border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-xl); }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Check list */
.check-list { margin-top: 2rem; display: grid; gap: 0.75rem; }
.check-item { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); padding: 1rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.check-item svg { color: var(--brand); flex-shrink: 0; }

/* CTA banner */
.cta-banner { border-radius: 1.5rem; background: var(--brand); color: var(--brand-foreground); padding: 2.5rem; display: grid; gap: 2rem; align-items: center; }
.cta-banner .eyebrow { color: rgba(255,255,255,.8); }
.cta-banner h2 { margin-top: 0.75rem; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; max-width: 36rem; }
.cta-banner p { margin-top: 1rem; color: rgba(255,255,255,.85); max-width: 36rem; line-height: 1.7; }

/* Service page */
.service-hero-grid { display: grid; gap: 4rem; align-items: center; }
.applications { margin-top: 2rem; display: grid; gap: 1rem; }
.application { border: 1px solid var(--border); background: var(--card); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-sm); }
.application h3 { font-size: 1.125rem; font-weight: 700; }
.application p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }

/* Contact cards */
.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.contact-card { border: 1px solid var(--border); background: var(--card); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-sm); }
.contact-label { margin-top: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--muted-foreground); text-transform: uppercase; }
.contact-value { margin-top: 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--brand); }
.contact-value.plain { color: var(--foreground); }

/* Footer */
.footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner { padding-block: 4rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.footer h4 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--muted-foreground); text-transform: uppercase; }
.footer ul { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.footer a.link { color: var(--brand); }
.footer a.link:hover { text-decoration: underline; }
.footer .contact-list { color: rgba(15,20,36,.8); }
.footer .contact-list li { display: flex; align-items: center; gap: 0.5rem; }
.footer .contact-list svg { color: var(--brand); }
.footer-brand { font-size: 1.25rem; font-weight: 700; }
.footer-brand-text { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; max-width: 20rem; }
.footer-bottom { border-top: 1px solid var(--border); padding: 1.5rem 0; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); }

/* Responsive */
@media (min-width: 768px) {
  .header-cta { display: inline-flex; }
  .hero .lead { font-size: 1.125rem; }
  .cta-banner { padding: 3.5rem; grid-template-columns: 1fr auto; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .nav { display: flex; }
  .hero-inner { grid-template-columns: 1fr 1fr; padding-block: 8rem; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .service-hero-grid { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: repeat(4, 1fr); }
}

.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: inline-flex; } }

.prose-legal h2 { font-size:1.25rem; font-weight:700; margin-top:2rem; margin-bottom:.75rem; letter-spacing:-0.02em; }
.prose-legal p, .prose-legal ul { margin-bottom:1rem; line-height:1.7; }
.prose-legal ul { list-style:disc; padding-left:1.25rem; }
.prose-legal a { color:var(--brand); text-decoration:underline; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; max-width:80rem; margin:0 auto; padding:1.5rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--muted-fg); }
.footer-legal a { color:inherit; text-decoration:none; margin-left:.25rem; }
.footer-legal a:hover { color:var(--foreground); }


/* Cookie consent */
.cookie-consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;max-width:32rem;margin-left:auto;background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);padding:1.25rem 1.25rem}
.cookie-consent h3{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.cookie-consent p{margin:0 0 .75rem;font-size:.875rem;color:#475569;line-height:1.5}
.cookie-consent .cookie-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.cookie-consent .cookie-actions button{cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#0f172a;border-radius:999px;padding:.55rem 1rem;font-size:.8125rem;font-weight:500;font-family:inherit}
.cookie-consent .cookie-actions button.primary{background:var(--brand,#0090ff);border-color:transparent;color:#fff}
.cookie-consent .cookie-actions button.primary:hover{opacity:.9}
.cookie-consent .cookie-actions button:hover{background:#f8fafc}
.cookie-consent a{color:var(--brand,#0090ff);text-decoration:underline}
.cookie-consent .cookie-toggles{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0;border-top:1px solid #e2e8f0;padding-top:.75rem}
.cookie-consent .cookie-toggle{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem}
.cookie-consent .cookie-toggle .desc{color:#64748b;font-size:.75rem;display:block;margin-top:2px}
.cookie-consent .switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.cookie-consent .switch input{opacity:0;width:0;height:0}
.cookie-consent .slider{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s}
.cookie-consent .slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:999px;transition:.2s}
.cookie-consent input:checked + .slider{background:var(--brand,#0090ff)}
.cookie-consent input:checked + .slider:before{transform:translateX(16px)}
.cookie-consent input:disabled + .slider{opacity:.7}
.cookie-consent.hidden{display:none}

/* Contact form */
.contact-form{display:grid;gap:1.25rem;margin-top:2.5rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:2rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.contact-form label{display:grid;gap:.5rem;font-size:.875rem;font-weight:500}
.contact-form input,.contact-form textarea{border:1px solid var(--border);background:var(--bg);border-radius:.5rem;padding:.75rem 1rem;font:inherit;font-size:1rem;color:inherit;outline:none;transition:box-shadow .15s}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 2px var(--brand)}
.form-row{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}


/* Hero media (image) */
.hero-media{position:relative;border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-xl);ring:1px solid rgba(255,255,255,.1)}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media-features{position:absolute;left:1rem;right:1rem;bottom:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.hero-media-chip{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);color:#fff;border-radius:.75rem;padding:.5rem .75rem;font-size:.75rem;font-weight:600}
.hero-media-chip svg{color:var(--brand);flex-shrink:0}

.inline-brand-link{color:var(--brand);font-weight:600}
.inline-brand-link:hover{text-decoration:underline}

/* Gallery teaser on service pages */
.gallery-teaser{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;justify-content:space-between}
.gallery-teaser .teaser-h{margin-top:.75rem;font-size:clamp(1.5rem,2.5vw,1.875rem);font-weight:700;line-height:1.2;max-width:36rem}
.gallery-teaser .teaser-p{margin-top:.75rem;color:var(--muted-foreground);max-width:36rem;line-height:1.6}
.btn-dark{background:var(--foreground);color:#fff}
.btn-dark:hover{opacity:.9}
@media (min-width:768px){.gallery-teaser{flex-direction:row;align-items:center}}

/* Gallery grid */
.gallery-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gal-tile{position:relative;padding:0;border:0;background:none;border-radius:1rem;overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-sm);aspect-ratio:4/3;display:block}
.gal-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gal-tile:hover img{transform:scale(1.05)}
.gal-caption{position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;background:linear-gradient(to top,rgba(15,20,36,.85),transparent);color:#fff;font-size:.8125rem;font-weight:600;text-align:left;opacity:0;transform:translateY(6px);transition:.2s}
.gal-tile:hover .gal-caption,.gal-tile:focus-visible .gal-caption{opacity:1;transform:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,10,20,.94);display:flex;align-items:center;justify-content:center;padding:1rem}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;max-width:min(100%,1400px);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}
.lb-figure img{max-width:100%;max-height:calc(100vh - 6rem);object-fit:contain;border-radius:.5rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-figure figcaption{color:#e5e7eb;font-size:.9375rem;text-align:center;max-width:60ch}
.lb-counter{position:absolute;top:1rem;left:1.25rem;color:rgba(255,255,255,.7);font-size:.8125rem;letter-spacing:.05em}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;line-height:1;transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}
.lb-close{top:1rem;right:1.25rem;font-size:1.75rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
@media(min-width:768px){.lb-close,.lb-prev,.lb-next{width:52px;height:52px}}