/* ============================================================================
   Joenit public site — first cut
   Palette: deep steel-blue + brushed grey "metal" + bright blue accent.
   Layout: panels in a responsive grid. Desktop = side-by-side / top-to-bottom;
   phone = stacked. Self-contained, system fonts, no external assets.
   ========================================================================== */

:root{
  /* blues */
  --blue-900:#0d1b2a;   /* near-black navy */
  --blue-800:#15263b;
  --blue-700:#1c3553;
  --blue-600:#244467;
  --steel:#3a6ea5;      /* steel blue */
  --accent:#2f74e0;     /* bright action blue */
  --accent-hi:#4f93ff;

  /* metal / grey */
  --ink:#14202e;
  --grey-50:#f5f7fa;
  --grey-100:#eceff3;
  --grey-200:#dde2e9;
  --grey-300:#c4ccd6;
  --grey-500:#7b8694;
  --grey-700:#404a57;

  --panel:#ffffff;
  --panel-edge:#e4e8ee;
  --text:#1d2733;
  --text-soft:#566373;

  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.05);
  --shadow-md:0 6px 18px rgba(13,27,42,.10), 0 2px 6px rgba(13,27,42,.06);
  --shadow-lg:0 18px 50px rgba(13,27,42,.18);

  --maxw:1180px;
  --chrome-h:88px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--chrome-h) + 12px)}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--grey-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15; letter-spacing:-.01em; color:var(--ink)}

/* ============================== TOP CHROME ============================== */
.chrome{
  position:sticky; top:0; z-index:50;
  height:var(--chrome-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 clamp(1rem,4vw,2.5rem);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,250,.82));
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--panel-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; color:var(--blue-800)}
.brand__logo{height:68px; width:auto; display:block}
.brand__name{background:linear-gradient(180deg,var(--blue-700),var(--steel)); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand__mark{
  width:26px; height:26px; border-radius:8px;
  background:
    linear-gradient(135deg, var(--accent-hi), var(--accent) 45%, var(--blue-700));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm);
  position:relative;
}
.brand__mark::after{
  content:""; position:absolute; inset:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8, transparent 60%), #0d1b2a55;
  border:2px solid rgba(255,255,255,.85);
}

.nav{margin-left:auto; display:flex; align-items:center; gap:.35rem}
.nav a{
  padding:.5rem .8rem; border-radius:9px; font-weight:600; font-size:.95rem;
  color:var(--grey-700); transition:.18s;
}
.nav a:hover{background:var(--grey-100); color:var(--ink)}
.nav a.active{color:var(--accent)}
.nav__cta{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff !important; box-shadow:var(--shadow-sm);
}
.nav__cta:hover{filter:brightness(1.06)}

/* language switcher (segmented control) */
.lang{
  display:inline-flex; gap:2px; padding:3px;
  border:1px solid var(--panel-edge); border-radius:10px; background:var(--grey-100);
}
.lang button{
  border:0; background:transparent; font:inherit; cursor:pointer;
  font-weight:700; font-size:.78rem; letter-spacing:.04em; color:var(--grey-500);
  padding:.32rem .55rem; border-radius:7px; transition:.15s;
}
.lang button:hover{color:var(--ink)}
.lang button.active{background:#fff; color:var(--accent); box-shadow:var(--shadow-sm)}

.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.hamburger span{display:block; width:24px; height:2px; background:var(--blue-800); border-radius:2px; transition:.25s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================================= HERO ================================= */
.hero{
  position:relative; overflow:hidden;
  color:#eaf1fb;
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(79,147,255,.30), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(58,110,165,.30), transparent 55%),
    linear-gradient(160deg, var(--blue-900), var(--blue-700) 60%, var(--blue-600));
}
.hero::before{ /* brushed-metal sheen */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px);
  mix-blend-mode:overlay; pointer-events:none;
}
.hero__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1rem,4vw,2.5rem);
  position:relative;
}
.hero__eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700;
  color:var(--accent-hi); margin-bottom:1.1rem;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,5.5vw,3.9rem); font-weight:600;
  color:#dbe7f7; letter-spacing:-.01em; line-height:1.18;
}
.hero__lead{max-width:60ch; margin:1.3rem 0 2rem; font-size:clamp(1.02rem,1.6vw,1.2rem); color:#c4d4ea}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem}
.hero__stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,3.5rem);
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__stats li{display:flex; flex-direction:column}
.hero__stats strong{font-size:1.9rem; font-weight:800; color:#fff; letter-spacing:-.02em}
.hero__stats span{font-size:.85rem; color:#9fb4d4; text-transform:uppercase; letter-spacing:.08em}

/* ================================ BUTTONS =============================== */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.78rem 1.35rem; border-radius:11px;
  font-weight:700; font-size:.96rem; cursor:pointer; border:1px solid transparent;
  transition:.18s; white-space:nowrap;
}
.btn--lg{padding:.95rem 1.7rem; font-size:1.02rem}
.btn--primary{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff; box-shadow:var(--shadow-md);
}
.btn--primary:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn--ghost{
  background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn--ghost:hover{background:rgba(255,255,255,.16)}
/* ghost button on light panels */
.cta-panel .btn--ghost{background:var(--grey-100); color:var(--blue-800); border-color:var(--grey-300)}
.cta-panel .btn--ghost:hover{background:var(--grey-200)}

/* ================================= BANDS ================================ */
.band{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem)}
.band--alt{
  max-width:none;
  background:
    linear-gradient(180deg,#fff, var(--grey-50)),
    repeating-linear-gradient(90deg, rgba(36,68,103,.02) 0 1px, transparent 1px 60px);
  border-block:1px solid var(--panel-edge);
}
.band--alt > *{max-width:var(--maxw); margin-inline:auto}
.band__head{max-width:62ch; margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.band__head h2{font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:800}
.band__head p{margin-top:.7rem; color:var(--text-soft); font-size:1.08rem}

/* ================================= GRID ================================= */
.grid{display:grid; gap:clamp(1rem,2vw,1.4rem)}
.grid--story{grid-template-columns:1.25fr 1fr}
.grid--four{grid-template-columns:repeat(4,1fr)}
.grid--brands{grid-template-columns:repeat(2,1fr)}
.grid--two{grid-template-columns:repeat(2,1fr)}

/* ================================ PANELS ================================ */
.panel{
  background:
    linear-gradient(180deg, #ffffff, #fbfcfe);
  border:1px solid var(--panel-edge);
  border-radius:var(--radius);
  padding:clamp(1.4rem,2.5vw,2rem);
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:transform .2s, box-shadow .2s;
}
.panel::before{ /* top metal highlight */
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  border-radius:var(--radius) var(--radius) 0 0;
}
.panel h3{font-size:1.25rem; margin-bottom:.6rem}
.panel p{color:var(--text-soft)}
.panel p + p{margin-top:.8rem}

/* who-we-are */
.panel--lead p{color:var(--text-soft); font-size:1.04rem}
.people{display:flex; gap:1.5rem; margin-top:1.5rem; flex-wrap:wrap}
.person{display:flex; align-items:center; gap:.7rem}
.person__avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:800; font-size:.85rem; color:#fff;
  background:linear-gradient(135deg,var(--steel),var(--blue-700));
  box-shadow:var(--shadow-sm);
}
.person__txt{display:flex; flex-direction:column; font-size:.9rem; color:var(--text-soft)}
.person__txt strong{color:var(--ink); font-size:.98rem}

/* timeline */
.panel--timeline{background:linear-gradient(180deg,var(--blue-800),var(--blue-900)); border-color:#0c1928}
.panel--timeline h3{color:#fff}
.timeline{list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-top:.4rem}
.timeline li{display:grid; grid-template-columns:64px 1fr; gap:.9rem; align-items:start; color:#bcd0ec; font-size:.93rem}
.timeline__yr{
  font-weight:800; color:var(--accent-hi); font-size:.95rem;
  padding-top:.05rem; border-right:1px solid rgba(255,255,255,.14);
}

/* feature cards */
.feature{text-align:left}
.feature__icon{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:.9rem;
  border-radius:12px; font-size:1.25rem; color:var(--accent);
  background:linear-gradient(180deg,#eaf1fd,#dce8fb);
  border:1px solid #cfe0fb;
}

/* brand cards */
.brand-card{padding-top:1.7rem; display:flex; flex-direction:column}
.brand-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  border-radius:var(--radius) 0 0 var(--radius);
}
.brand-card__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem; margin-bottom:.6rem}
.brand-card__head h3{margin:0; font-size:1.4rem}
.tag{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff);
  padding:.22rem .55rem; border-radius:999px;
}
.brand-card > p{flex:1}
.brand-card__foot{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--grey-200);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem;
}
.role{font-size:.83rem; font-weight:600; color:var(--grey-700)}
.brand-card__foot a{font-weight:700; color:var(--accent); font-size:.9rem}
.brand-card__foot a:hover{text-decoration:underline}

/* prices + dealers split */
.split{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.4rem); align-items:stretch}
.split{max-width:none}
.split{padding-inline:clamp(1rem,4vw,2.5rem)}
.split > .cta-panel{margin:0}
.cta-panel{display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.8rem,3vw,2.6rem)}
.cta-panel h2{font-size:clamp(1.5rem,3vw,2rem)}
.cta-panel p{margin:.9rem 0 1.5rem; color:var(--text-soft)}
.cta-panel .btn{margin-top:auto}
.cta-panel__note{font-size:.82rem; color:var(--grey-500); margin-top:.9rem !important}
#prices-panel{
  background:linear-gradient(165deg, var(--blue-700), var(--blue-900));
  border-color:#0c1928;
}
#prices-panel h2{color:#fff}
#prices-panel p{color:#bcd0ec}
#prices-panel .cta-panel__note{color:#7e95b8}

/* contact / offices */
.office__flag{font-size:.85rem; font-weight:700; color:var(--text-soft); letter-spacing:.02em}
.office h3{margin:.4rem 0 .7rem}
.office address{font-style:normal; color:var(--text-soft); margin-bottom:1rem}
.office__lines{list-style:none; display:flex; flex-direction:column; gap:.5rem}
.office__lines li{display:grid; grid-template-columns:64px 1fr; gap:.5rem; font-size:.96rem}
.office__lines span{color:var(--grey-500); font-size:.85rem; padding-top:.05rem}
.office__lines a{color:var(--accent); font-weight:600}
.office__lines a:hover{text-decoration:underline}

/* ================================ FOOTER ================================ */
.footer{background:var(--blue-900); color:#9fb4d4; border-top:1px solid #0c1928}
.footer__inner{max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem); text-align:center}
.footer__brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem; color:#fff}
.footer__logo{height:42px; width:auto; display:block; filter:brightness(0) invert(1); opacity:.92}
.footer__motto{margin:.7rem 0 1.6rem; font-style:italic; color:#7e95b8}
.footer__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; margin-bottom:1.6rem}
.footer__nav a{font-weight:600; color:#bcd0ec}
.footer__nav a:hover{color:#fff}
.footer__legal{font-size:.82rem; color:#5f7799}

/* ============================ IMAGE SLOTS =============================== */
/* Empty = styled placeholder; a real JPEG fills it with zero reflow.
   In Publisher's "Website builder" these are the drag-drop targets. */
.showcase{padding-top:0}
.imgslot{
  position:relative; overflow:hidden; border-radius:var(--radius-sm);
  display:grid; place-items:center; aspect-ratio:4/3;
  color:var(--grey-500); border:1px solid var(--panel-edge);
  background:
    repeating-linear-gradient(45deg, var(--grey-100) 0 11px, var(--grey-200) 11px 22px);
}
.imgslot--wide{aspect-ratio:16/6; width:100%}
.imgslot--card{aspect-ratio:4/3; margin-bottom:1.1rem}
.brand-card__video{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm); margin-bottom:1.1rem; background:#000}
.brand-card__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.imgslot__hint{
  font-size:.85rem; font-weight:700; letter-spacing:.01em; text-align:center;
  padding:.45rem .8rem; background:rgba(255,255,255,.78); border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.imgslot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.imgslot.filled{background:none; border-color:transparent}
.imgslot.filled .imgslot__hint{display:none}

/* edit mode (demo) */
body.editing .imgslot{outline:2px dashed var(--accent); outline-offset:-5px; cursor:pointer}
body.editing .imgslot:hover{filter:brightness(.97)}
.imgslot.drop{outline:3px solid var(--accent); outline-offset:-5px;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent) inset}
body.editing .imgslot.filled::after{
  content:"Click or drop to replace"; position:absolute; left:8px; bottom:8px;
  font-size:.74rem; font-weight:700; color:#fff;
  background:rgba(13,27,42,.72); padding:.25rem .55rem; border-radius:7px;
}

.editfab{
  position:fixed; left:18px; bottom:18px; z-index:60;
  border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.9rem;
  padding:.7rem 1.1rem; border-radius:12px; color:#fff;
  background:linear-gradient(180deg, var(--steel), var(--blue-700));
  box-shadow:var(--shadow-lg);
}
.editfab:hover{filter:brightness(1.06)}
.editfab.on{background:linear-gradient(180deg, var(--accent-hi), var(--accent))}

/* language suggestion banner (soft, dismissible, bottom) */
.langbar{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%, 140%);
  z-index:60; display:flex; align-items:center; gap:.9rem;
  max-width:calc(100vw - 24px);
  padding:.6rem .7rem .6rem 1.1rem; border-radius:14px;
  background:linear-gradient(180deg, var(--blue-700), var(--blue-900));
  color:#eaf1fb; border:1px solid #0c1928;
  box-shadow:var(--shadow-lg);
  opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.langbar.in{transform:translate(-50%,0); opacity:1}
.langbar__txt{font-weight:600; font-size:.95rem}
.langbar__go{
  border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.9rem;
  color:#fff; padding:.45rem .85rem; border-radius:9px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
}
.langbar__go:hover{filter:brightness(1.07)}
.langbar__x{
  border:0; background:transparent; color:#9fb4d4; cursor:pointer;
  font-size:1.4rem; line-height:1; padding:.1rem .4rem; border-radius:8px;
}
.langbar__x:hover{color:#fff; background:rgba(255,255,255,.1)}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ============================== RESPONSIVE ============================== */
@media (max-width:980px){
  .grid--four{grid-template-columns:repeat(2,1fr)}
  .grid--story{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* phone: chrome collapses to a drawer; everything stacks */
  .nav{
    position:fixed; inset:var(--chrome-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    padding:1rem clamp(1rem,4vw,2.5rem) 1.4rem;
    background:rgba(255,255,255,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--panel-edge); box-shadow:var(--shadow-lg);
    transform:translateY(-130%); transition:transform .28s ease; visibility:hidden;
  }
  .nav.open{transform:translateY(0); visibility:visible}
  .nav a{padding:.85rem 1rem; font-size:1.05rem}
  .nav__cta{text-align:center; margin-top:.4rem}
  .lang{margin-left:auto}      /* nav is out of flow → push lang + burger right */
  .hamburger{display:flex}

  .grid--four, .grid--brands, .grid--two, .split{grid-template-columns:1fr}
  .hero__stats{gap:1.4rem 2.2rem}
  .hero__stats strong{font-size:1.5rem}
}
@media (max-width:480px){
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .hero__stats li{flex:1 1 40%}
}