/* --- ModuSuite Combined CSS --- */
/* Base: modusuite-blog.css */
:root{
  --bg: #ffffff;
  --surface: #f6f7f9;
  --text: #0b0f19;
  --muted: #5b6470;
  --line: #e6e8ec;
  --accent: #0a4cff;
  --accent-ink: #0a3bd6;
  --maxw: 1168px;
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Inter,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.6
}

/* Utility (accessibility) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography tweaks */
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-0.01em}
.title,.banner-title{font-weight:800}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:36px;width:auto;display:block;object-fit:contain}
.brand-name{color:var(--text);font-weight:700;font-size:18px;letter-spacing:.2px;display:inline-block;transform:translateY(1px)}
.brand:hover .brand-name{text-decoration:underline;text-underline-offset:3px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.nav-links a:hover,.nav-links a:focus{color:var(--text)}

/* Banner Header */
.banner{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_0.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner2{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_1.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner3{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_2.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner4{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_3.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner5{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_4.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner6{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_5.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner7{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_6.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner8{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_7.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner9{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_8.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner10{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_9.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner11{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_10.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner12{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_11.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner13{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_12.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner14{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_13.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}

.banner15{
  position:relative;width:100%;
  height:clamp(220px,30vh,360px);
  background:url('images/modusuite_banner_14.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}


/* Removed previous grey overlay */
/* .banner::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.45)} */
.banner-title{
  position:relative;
  color: var(--text);
  font-size:clamp(32px,4vw,56px);
  line-height:1.15;letter-spacing:-0.02em;text-align:center;padding:0 20px;

  /* Legibility: text-only scrim behind title */
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  text-shadow: none;
}
@media (max-width: 600px){
  .banner-title { font-size: clamp(26px, 6vw, 40px); padding: 8px 12px; }
}

/* Breadcrumbs / meta */
.crumbs{font-size:14px;color:#475160;margin-bottom:8px}
.crumbs a{color:#475160;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px;margin-bottom:12px}

/* Layout */
.content-wrap{display:grid;grid-template-columns:1fr;gap:32px;padding:28px 0 64px}
@media(min-width:960px){.content-wrap{grid-template-columns:minmax(0,1fr) 280px}}
article{min-width:0}
article h2{margin:28px 0 12px;font-size:clamp(22px,2.4vw,28px);line-height:1.25}
article p{margin:12px 0}
article ul{margin:8px 0 16px 20px}
.lead{font-size:18px;color:#111827;line-height:1.7}

/* Cards / UI */
.tip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;color:var(--muted);font-size:14px}
.cta{margin:28px 0;padding:20px;border:1px solid var(--line);background:linear-gradient(0deg,#fff,#fbfcfe);border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}
.cta .btn{align-self:flex-start;display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(10,76,255,0.18)}
.cta .btn:hover{background:var(--accent-ink)}

/* Sidebar */
.aside{position:relative}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h3{margin:0 0 8px;font-size:16px}
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{margin:6px 0}
.list-clean a{color:var(--text);text-decoration:none}
.list-clean a:hover{text-decoration:underline}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fcfdff}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px;padding:32px 0}
@media(min-width:900px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.footer-title{font-weight:800;margin:0 0 8px;letter-spacing:.2px}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;font-weight:700;font-size:12px;border-radius:999px;background:#e7f0ff;color:#0a3bd6;border:1px solid #d7e5ff}
.footnote{border-top:1px solid var(--line);padding:12px 0;font-size:13px;color:var(--muted)}
.hr{height:1px;background:var(--line);border:0;margin:20px 0}


/* Components: modusuite-site.css */
/* === Hero ====================================================== */
.hero-img{position:relative; display:grid; place-items:center; text-align:center; background-size:cover; background-position:center; min-height:70vh}
@media (max-width:900px){.hero-img{min-height:40vh}}
.hero-inner{min-height:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:20px 16px}
.hero-badge{display:inline-block; padding:10px 16px; background:#fff; color:#0f1222; border-radius:12px; font-weight:400; font-size:22px; line-height:1.25; box-shadow:0 4px 18px rgba(0,0,0,.06); margin:0}
.hero-sub{max-width:860px; margin:8px 0 0; color:var(--muted); font-size:16px}

/* === Intro (3 paragraphs) ===================================== */
.intro{padding:28px 0}
.intro .grid{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:960px){.intro .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.intro .card{padding:16px}
.intro p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}

/* === Centerpiece image ======================================== */
.centerpiece-wrap{padding:10px 0 26px}
.centerpiece{width:100%; max-width:1100px; margin:0 auto; display:block; object-fit:cover; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.08)}
.centerpiece-true{margin:0 auto; max-width:1024px}
.centerpiece-true img{display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.08)}

/* === Value props ============================================== */
.value-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:860px){.value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.value-card{padding:16px}
.value-card h3{margin:6px 0 6px}
.value-card p{margin:0; color:var(--muted)}

/* === Product tiles ============================================ */
.products{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:720px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.product{padding:12px; overflow:hidden}
.product img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.product .body{padding:14px}
.product .title{margin:6px 0 6px; font-weight:700}

/* === Articles ================================================== */
.articles{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:980px){.articles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.article{padding:16px}
.article h4{margin:6px 0}
.article p{margin:0; color:var(--muted)}

/* === CTA band ================================================== */
.cta-home{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:#f6f7fb; border:1px solid #e1e4ea; border-radius:14px; overflow:hidden; position:relative}
.cta-home .kicker{font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:12px; color:var(--muted); margin-bottom:4px}
.cta-home h3{margin:0 0 4px; font-size:20px}
.cta-home p{margin:0; color:var(--muted)}
.cta-home .btn{flex-shrink:0; margin-left:auto; position:static !important; transform:none !important}
@media(max-width:760px){.cta-home{flex-direction:column; text-align:center} .cta-home .btn{margin-left:0;margin-top:8px}}

/* === Footer / logos =========================================== */
.logo-row{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center}
.logo-row img{height:34px; filter:grayscale(100%); opacity:.8}

/* Link colour override (exclude buttons) */
a:not(.btn){
  color: #111;                 /* black for default */
  text-decoration-color: currentColor;
  transition: color .15s ease;
}
a:not(.btn):visited{
  color: #111;                 /* black for visited too */
}
a:not(.btn):hover,
a:not(.btn):focus{
  color: #666;                 /* grey on hover/focus */
}

/* Optional: in-card links a touch bolder for readability */
.card a:not(.btn){
  font-weight: 600;
}

/* Badge: soft mono chip + smaller radius */
.badge{
  background: #f3f4f6;         /* subtle grey fill */
  color: #374151;               /* dark grey text */
  border: 1px solid #e5e7eb;    /* light outline */
  border-radius: 8px;           /* smaller, less "pill" */
  padding: 4px 8px;             /* compact chip */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  display: inline-block;
}

/* Optional rhythm tweak inside cards */
.card .badge{ margin-bottom: 6px; }

/* Gallery code chip — hover reveal (top-right) */
.gallery a{
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.gallery a img{
  display: block;
  width: 100%;
  height: auto;
}
.gallery a::after{
  content: attr(data-code);
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  font: 600 12px/1 Montserrat, system-ui, sans-serif;
  letter-spacing: .02em;
  pointer-events: none;

  /* hidden by default, animated on reveal */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
/* Reveal on hover or keyboard focus */
.gallery a:hover::after,
.gallery a:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: always visible on touch screens (no hover) */
@media (max-width: 760px){
  .gallery a::after{
    opacity: 1;
    transform: none;
  }
}




/* Hero: responsive sizing + safe height */
.hero-img{
  /* on very small screens, give the text more breathing room */
  min-height: 48vh;
}
@media (max-width: 480px){
  .hero-img{ min-height: 56vh; }
}
/* keep the inner stack centered with extra bottom padding */
.hero-inner{
  padding: 24px 16px 36px;
}

/* scale title/paragraph with viewport */
.hero-badge{
  font-size: clamp(18px, 4.6vw, 28px);
  font-weight: 600;           /* or 400 if you want it subtler */
  padding: 8px 14px;
}
.hero-sub{
  max-width: 860px;
  margin: 8px 0 0;
  font-size: clamp(14px, 3.5vw, 16px);
  text-wrap: balance;         /* nicer line breaks in modern browsers */
}

/* make hero actions wrap nicely on narrow screens */
.hero-img .actions{
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}


/* --- Mobile nav panel (restore open/close) --- */
/* ===== */ Mobile nav (button-driven) ===== */

/* Desktop defaults (make sure these exist globally somewhere) */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-links{ display:flex; gap:16px; align-items:center; }

/* ======== PATCH: Mobile nav fix ======== */
/* 1) Desktop reset: hide hamburger completely */
.nav-toggle{ display:none; border:0; background:transparent; box-shadow:none; padding:0 }
.nav-toggle span{ display:none }

/* 2) Mobile rules: precise hamburger + dropdown panel (button-driven) */
@media (max-width: 860px){
  .nav{ position: relative; }

  /* Hamburger button */
  .nav-toggle{
    display:flex !important; z-index:41;
    width:40px; height:40px;
    border:1px solid #e5e7eb; border-radius:10px;
    background:#fff; cursor:pointer; position:relative;
  }
  .nav-toggle span{
    display:block !important;               /* re-enable the bars on mobile */
    position:absolute; left:50%;
    width:22px; height:2px; background:#111;
    border-radius:2px;
    transform:translateX(-50%); transform-origin:center;
    transition:transform .18s ease, opacity .18s ease;
  }
  .nav-toggle span:nth-child(1){ top:12px; }
  .nav-toggle span:nth-child(2){ top:19px; }
  .nav-toggle span:nth-child(3){ top:26px; }

  /* Closed panel (hidden by default) */
  .nav-links{
    display:none; position:absolute;
    right:16px; left:16px; top:64px;
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:12px; box-shadow:0 20px 40px rgba(0,0,0,.10);
    transform:translateY(-6px);
    opacity:0; pointer-events:none; z-index:40;
    grid-auto-rows:minmax(40px,auto);
  }
  .nav-links a{ padding:10px 8px; border-radius:8px; }

  /* Open state (JS toggles .is-open on <nav>) */
  .nav.is-open .nav-links{
    display:grid; gap:8px;
    opacity:1; pointer-events:auto; transform:translateY(0);
  }
  .nav.is-open .nav-toggle span:nth-child(1){
    transform:translateX(-50%) translateY(7px) rotate(45deg);
  }
  .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3){
    transform:translateX(-50%) translateY(-7px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle span{ transition:none; }
}
/* ======== END PATCH ======== */

/* Mobile menu: right-aligned, content-width popup */
@media (max-width: 860px){
  .nav-links{
    left: auto;                /* anchor to the right only */
    right: 16px;
    width: max-content;        /* fit to longest item */
    max-width: calc(100vw - 32px); /* never exceed viewport */
    min-width: 220px;          /* optional floor, tweak to taste */
    transform-origin: top right;
  }
  /* Keep each item on one line so the panel fits to content width */
  .nav-links a{ white-space: nowrap; }
}


/* ===== */


/* Slideshow */
.slideshow{ margin-top: 24px; }
.slideshow-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.slideshow-title{ margin:0; font-size:20px; font-weight:700; }
.slideshow-ctr{ display:flex; gap:8px; }

.ss-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer; font-size:20px; line-height:1; display:grid; place-items:center;
}
.ss-btn:active{ background:#f6f7fb; }

/* Viewport with fixed aspect (21:9-ish). Adjust padding-bottom if you prefer. */
.ss-viewport{
  position:relative; overflow:hidden; border-radius:14px; border:1px solid #e5e7eb; background:#f6f7fb;
  aspect-ratio: 21 / 9;          /* modern browsers */
}
@supports not (aspect-ratio: 1){
  .ss-viewport::before{ content:""; display:block; padding-bottom: 42.85%; } /* ≈21:9 */
}

.ss-track{
  list-style:none; margin:0; padding:0;
  display:flex; height:100%;
  transform: translateX(0);
  transition: transform .36s ease;
}
.ss-slide{ flex: 0 0 100%; height: 100%; }
.ss-slide img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Dots */
.ss-dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.ss-dot{
  width:8px; height:8px; border-radius:999px; background:#d1d5db; border:0; cursor:pointer; padding:0;
}
.ss-dot[aria-selected="true"]{ background:#111; width:20px; transition: width .18s ease; }

/* Pause animation for users preferring reduced motion */
@media (prefers-reduced-motion: reduce){
  .ss-track{ transition:none; }
}