/* ═══════════════════════════════════════════════════════════════
   MB Tech Solutions — stylesheet

   Everything visual is controlled by the tokens in :root below.
   Change a value there and it propagates through the whole site.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── brand colours ─────────────────────────────────── */
  --accent:        #ea580c;   /* orange — matches the printed parts */
  --accent-dark:   #c2410c;
  --accent-soft:   #fff7ed;

  /* ── neutrals ──────────────────────────────────────── */
  --ink:           #0f172a;   /* headings, dark sections */
  --ink-soft:      #334155;   /* body text */
  --muted:         #64748b;   /* secondary text */
  --line:          #e5e9ef;   /* borders, dividers */
  --bg:            #ffffff;
  --bg-soft:       #f6f8fa;   /* alternating section background */

  /* ── shape & rhythm ────────────────────────────────── */
  --radius:        14px;
  --radius-lg:     22px;
  --wrap:          1180px;
  --gap:           clamp(20px, 3vw, 34px);
  --section-y:     clamp(58px, 8vw, 104px);

  /* ── type ──────────────────────────────────────────── */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --h1: clamp(2.1rem, 5.2vw, 3.6rem);
  --h2: clamp(1.6rem, 3.4vw, 2.4rem);
  --h3: clamp(1.15rem, 1.9vw, 1.35rem);

  /* ── depth ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,.07), 0 14px 34px rgba(15,23,42,.09);
  --shadow-lg: 0 10px 24px rgba(15,23,42,.10), 0 30px 70px rgba(15,23,42,.16);
}

/* ── base ────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ color:var(--ink); line-height:1.15; letter-spacing:-.022em; margin:0 0 .5em; }
h1{ font-size:var(--h1); font-weight:800; letter-spacing:-.03em; }
h2{ font-size:var(--h2); font-weight:700; }
h3{ font-size:var(--h3); font-weight:700; letter-spacing:-.015em; }
p{ margin:0 0 1em; }
img,svg{ max-width:100%; display:block; }
a{ color:var(--accent-dark); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }
.muted{ color:var(--muted); }
.note{ font-size:.9rem; color:var(--muted); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius) 0;
}
.skip:focus{ left:0; }

:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;
}

/* ── buttons ─────────────────────────────────────────── */
.btn{
  --btn-bg:var(--accent); --btn-fg:#fff; --btn-bd:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.82em 1.5em; border:1.5px solid var(--btn-bd); border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:650; text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn-primary{ box-shadow:0 6px 18px rgba(234,88,12,.28); }
.btn-primary:hover{ --btn-bg:var(--accent-dark); --btn-bd:var(--accent-dark); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn-ghost:hover{ --btn-bd:var(--ink); }

/* ── header ──────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.site-head.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 14px rgba(15,23,42,.05); }

.head-inner{ display:flex; align-items:center; gap:20px; min-height:68px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand img{ width:34px; height:34px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.06; }
.brand-text strong{ font-size:1.03rem; font-weight:800; letter-spacing:-.025em; }
.brand-text span{ font-size:.72rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:.5em .95em; border-radius:999px; text-decoration:none;
  color:var(--ink-soft); font-weight:550; font-size:.96rem;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--bg-soft); color:var(--ink); }

.head-right{ display:flex; align-items:center; gap:10px; }

.lang{ display:flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.lang button{
  border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:.8rem; font-weight:700; letter-spacing:.04em;
  padding:.42em .8em; color:var(--muted); transition:background .15s, color .15s;
}
.lang button:hover{ color:var(--ink); }
.lang button.is-on{ background:var(--ink); color:#fff; }

.burger{
  display:none; width:42px; height:42px; padding:10px;
  border:1.5px solid var(--line); border-radius:11px; background:transparent; cursor:pointer;
}
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .22s ease, opacity .18s ease; }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── hero ────────────────────────────────────────────── */
.hero{
  padding-block:clamp(42px,6vw,84px) clamp(50px,7vw,96px);
  background:
    radial-gradient(1100px 460px at 88% -8%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, #fff, var(--bg-soft));
  border-bottom:1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4.5vw,60px); align-items:center; }

.eyebrow{
  font-size:.79rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:.9em;
}
.hero-copy h1{ margin-bottom:.42em; }
.hero-copy .lede{ max-width:36ch; }

/* Location badge under the hero copy. */
.loc{
  display:inline-flex; align-items:center; gap:.55em;
  margin:1.5em 0 0; padding:.5em 1.05em;
  background:var(--accent-soft); border:1px solid #fed7aa; border-radius:999px;
  color:var(--accent-dark); font-size:.93rem; font-weight:650;
}
.loc svg{ width:17px; height:17px; flex:0 0 auto; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:1.4em 0 0; }

.hero-points{ list-style:none; margin:2em 0 0; padding:0; display:grid; gap:.62em; }
.hero-points li{ position:relative; padding-left:1.7em; font-size:.97rem; color:var(--ink-soft); }
.hero-points li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.hero-shot{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-shot img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* ── sections ────────────────────────────────────────── */
.section{ padding-block:var(--section-y); }
.section--soft{ background:var(--bg-soft); border-block:1px solid var(--line); }

.sec-head{ max-width:60ch; margin-bottom:clamp(28px,4vw,46px); }
.sec-head h2{ margin-bottom:.3em; }
.sec-head p{ color:var(--muted); font-size:1.06rem; margin:0; }

/* ── service cards ───────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }

.card{
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#d7dde6; }

.card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media--art{
  display:grid; place-items:center;
  background:linear-gradient(155deg,#eff6ff,#dbeafe 55%,#bfdbfe);
}
.card-media--art img{ width:auto; height:78%; object-fit:contain; }

.card-body{ padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; flex:1; }
.card-body h3{ margin-bottom:.1em; }
.card-kicker{
  font-size:.79rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:1em;
}

.ticks{ list-style:none; margin:.4em 0 1.4em; padding:0; display:grid; gap:.5em; }
.ticks li{ position:relative; padding-left:1.65em; font-size:.945rem; }
.ticks li::before{
  content:""; position:absolute; left:.1em; top:.44em;
  width:11px; height:6px; border-left:2.2px solid var(--accent); border-bottom:2.2px solid var(--accent);
  transform:rotate(-45deg);
}

.card-link{
  margin-top:auto; align-self:flex-start;
  font-weight:650; font-size:.95rem; text-decoration:none; color:var(--accent-dark);
}
.card-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ── gallery ─────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(20px,3vw,28px); }
.filters button{
  border:1.5px solid var(--line); background:var(--bg); border-radius:999px;
  padding:.5em 1.1em; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.filters button:hover{ border-color:var(--ink); }
.filters button.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }

.tile{
  position:relative; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tile img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--line); }

.tile .cap{
  position:absolute; inset:auto 0 0 0; padding:2.6em .95em .8em;
  background:linear-gradient(transparent, rgba(15,23,42,.86));
  color:#fff; font-size:.88rem; line-height:1.4; text-align:left;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.tile:hover .cap,
.tile:focus-visible .cap{ opacity:1; transform:none; }

.tile .zoom{
  position:absolute; top:10px; right:10px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:15px;
  opacity:0; transform:scale(.85); transition:opacity .2s ease, transform .2s ease;
}
.tile:hover .zoom, .tile:focus-visible .zoom{ opacity:1; transform:none; }

.grid-empty{ color:var(--muted); }

/* ── about ───────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:start; }
.about-grid p{ max-width:56ch; }

.facts{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.facts li{
  background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 18px;
}
.facts strong{ display:block; color:var(--ink); font-size:1rem; margin-bottom:.15em; }
.facts span{ font-size:.93rem; color:var(--muted); }

/* ── contact ─────────────────────────────────────────── */
.section--dark{
  background:
    radial-gradient(760px 340px at 50% 0%, #1e293b, transparent 70%),
    var(--ink);
  color:#cbd5e1; text-align:center;
}
.section--dark h2{ color:#fff; }
.section--dark .lede{ color:#cbd5e1; }
.contact-inner{ max-width:62ch; }
.contact-inner .lede{ margin-inline:auto; }

.mail{
  display:inline-block; margin:.6em 0 .8em;
  font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:700; letter-spacing:-.02em;
  color:#fff; text-decoration:none; word-break:break-word;
  border-bottom:2px solid var(--accent); padding-bottom:3px;
}
.mail:hover{ color:var(--accent); }
/* Address block in the dark contact section. */
.addr{
  display:inline-flex; align-items:center; gap:.7em;
  margin:1.4em auto .4em; padding:.85em 1.35em;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  font-style:normal; text-align:left;
}
.addr svg{ width:22px; height:22px; flex:0 0 auto; color:var(--accent); }
.addr strong{ display:block; color:#fff; font-size:1.02rem; font-weight:650; }
.addr span span{ color:#94a3b8; font-size:.9rem; }

.section--dark .note{ color:#94a3b8; }

/* ── footer ──────────────────────────────────────────── */
.site-foot{ background:#0b1120; color:#94a3b8; padding-block:34px; font-size:.92rem; }
.foot-inner p{ margin:.18em 0; }
.site-foot strong{ color:#e2e8f0; }
.site-foot a{ color:#cbd5e1; text-decoration:none; }
.site-foot a:hover{ color:#fff; text-decoration:underline; }

/* ── lightbox ────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:clamp(12px,3vw,44px);
  background:rgba(8,11,20,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:lbIn .18s ease;
}
/* `display:grid` above would otherwise beat the browser's [hidden] rule. */
.lb[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }

.lb-figure{ margin:0; max-width:min(1500px,100%); max-height:100%; display:flex; flex-direction:column; gap:12px; }
.lb-figure img{
  max-width:100%; max-height:calc(100vh - 170px);
  width:auto; height:auto; margin-inline:auto;
  border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.lb-figure figcaption{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 22px; color:#e2e8f0; font-size:.95rem;
}
.lb-figure figcaption a{ color:var(--accent); font-weight:650; text-decoration:none; white-space:nowrap; }
.lb-figure figcaption a:hover{ text-decoration:underline; }

.lb-close,.lb-nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.2); }
.lb-close{ top:16px; right:16px; width:44px; height:44px; font-size:28px; line-height:1; }
.lb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:32px; line-height:1; }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-prev{ left:clamp(8px,2vw,26px); }
.lb-next{ right:clamp(8px,2vw,26px); }

body.lb-open{ overflow:hidden; }

/* ── responsive ──────────────────────────────────────── */
@media (max-width:960px){
  .cards,.grid{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-shot{ order:-1; }
  .hero-copy .lede{ max-width:none; }
  .about-grid{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  html{ scroll-padding-top:70px; }
  .burger{ display:block; }

  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:2px; margin:0; padding:10px 16px 18px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.75em .9em; font-size:1.02rem; }

  .cards,.grid{ grid-template-columns:1fr; }
  .card-media{ aspect-ratio:16/9; }

  .cta-row .btn{ flex:1 1 auto; }

  .lb-nav{ width:44px; height:44px; font-size:26px; }
  .lb-figure img{ max-height:calc(100vh - 200px); }
  .lb-figure figcaption{ justify-content:center; text-align:center; }

  /* captions always visible on touch — there is no hover */
  .tile .cap{ opacity:1; transform:none; padding-top:2em; }
  .tile .zoom{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .site-head,.filters,.lb,.cta-row,.burger{ display:none !important; }
  .section--dark{ background:#fff; color:#000; }
  .section--dark h2,.mail{ color:#000; }
}