/* ============================================================
   Miga Bär — Workflow & Postproduction Consultancy
   Redesign v2 · single stylesheet
   Identity: blue (#0B5394) + bear logo. Signature motif:
   a blue→cyan "spectrum" accent (a nod to colour grading).
   Recolour everything from the :root tokens below.
   ============================================================ */

:root {
  /* brand */
  --blue:     #0B5394;
  --blue-700: #083f6e;
  --navy:     #001C35;
  --accent:   #237AC9;
  --cyan:     #4FC3E8;
  --spectrum: linear-gradient(90deg, #0B5394 0%, #237AC9 50%, #4FC3E8 100%);

  /* neutrals */
  --ink:      #122231;   /* headings on light       */
  --body:     #3f4e5a;   /* body text               */
  --muted:    #6c7b88;   /* secondary text          */
  --bg:       #ffffff;
  --bg-soft:  #f3f7fb;   /* light section           */
  --bg-tint:  #e6eef6;
  --line:     #dde7ef;

  /* system */
  --max:      1200px;
  --radius:   14px;
  --shadow:   0 10px 30px rgba(11,83,148,0.10);
  --shadow-sm:0 4px 14px rgba(11,83,148,0.08);
  --ease:     cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--body);
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family:"Barlow",sans-serif; color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-0.01em; }
p { color: var(--body); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; height:auto; display:block; }

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

/* kicker + spectrum motif ----------------------------------- */
.kicker { display:inline-flex; align-items:center; gap:12px;
  font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px; }
.kicker::before { content:""; width:34px; height:3px; border-radius:3px; background:var(--spectrum); }
.kicker.light { color:#bfe0f3; }
.kicker.center { justify-content:center; }

.lead { font-size:clamp(18px,2vw,21px); color:var(--muted); max-width:64ch; }

/* buttons --------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(35,122,201,.32); }
.btn-primary:hover { background:#1c6bb4; }
.btn-ghost { border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.12); }
.btn-outline { border-color:var(--line); color:var(--blue); background:#fff; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.arrow { transition:transform .2s var(--ease); }
.btn:hover .arrow, .more:hover .arrow { transform:translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; }
.site-header.scrolled { border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(11,83,148,.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--max); margin:0 auto; padding:14px 32px; }
.brand { display:flex; align-items:center; gap:14px; position:relative; z-index:70; }
.brand:hover { text-decoration:none; }
.brand img { height:52px; width:auto; }
.brand .name { font-size:22px; font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.01em; }
.brand .name small { display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:3px; }

.nav { display:flex; align-items:center; gap:6px; }
.nav a.link { color:var(--ink); font-weight:500; font-size:16px; padding:9px 14px; border-radius:8px; position:relative; }
.nav a.link:hover { color:var(--accent); text-decoration:none; background:var(--bg-soft); }
.nav a.link.active { color:var(--accent); }
.nav a.link.active::after { content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--spectrum); }
.nav .btn { margin-left:10px; padding:11px 20px; }

.menu-btn { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  background:#fff; cursor:pointer; align-items:center; justify-content:center; position:relative; z-index:70; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { content:""; display:block; width:20px; height:2px;
  background:var(--ink); border-radius:2px; position:relative; transition:.25s var(--ease); }
.menu-btn span::before { position:absolute; top:-6px; }
.menu-btn span::after { position:absolute; top:6px; }
.menu-btn.open span { background:transparent; }
.menu-btn.open span::before { top:0; transform:rotate(45deg); }
.menu-btn.open span::after { top:0; transform:rotate(-45deg); }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero { position:relative; color:#fff; overflow:hidden; }
.hero .bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); }
.hero .scrim { position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(0,28,53,.95) 0%, rgba(8,63,110,.86) 48%, rgba(11,83,148,.40) 100%); }
.hero .spectrum-edge { position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--spectrum); }
.hero-inner { position:relative; max-width:var(--max); margin:0 auto; padding:14px 32px 20px; }
.hero h1 { color:#fff; font-size:clamp(38px,5.2vw,62px); max-width:18ch; }
.hero h1 .hl { color:var(--cyan); }
.hero .lead { color:#d4e4f1; margin-top:18px; max-width:56ch; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hero .meta { margin-top:28px; display:flex; flex-wrap:wrap; gap:8px 26px; color:#bcd2e6; font-size:15px; }
.hero .meta a { color:#fff; }
.hero .watermark { position:absolute; right:-40px; bottom:-30px; width:360px; opacity:.08; filter:brightness(0) invert(1); pointer-events:none; }

/* ============================================================
   Trust strip
   ============================================================ */
.trust { background:var(--navy); color:#cfe0ee; }
.trust .wrap { display:flex; align-items:center; gap:26px 40px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px; }
.trust .label { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7fa6c6; white-space:nowrap; }
.trust .names { display:flex; flex-wrap:wrap; gap:14px 30px; }
.trust .names span { font-weight:600; color:#dcebf9; color:#e3eef7; font-size:17px; letter-spacing:.01em; }

/* ============================================================
   Sections
   ============================================================ */
section { padding:96px 0; }
.section-head { max-width:62ch; margin-bottom:54px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { font-size:clamp(30px,4vw,46px); color:var(--ink); }
.section-head p { margin-top:14px; }
.soft { background:var(--bg-soft); }

/* services — numbered editorial cards ----------------------- */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.svc { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease), box-shadow .28s, border-color .28s; }
.svc:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:#cfe0f0; }
.svc .thumb { aspect-ratio:16/9; overflow:hidden; }
.svc .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.svc:hover .thumb img { transform:scale(1.05); }
.svc .body { padding:26px 28px 30px; }
.svc .num { font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--accent); }
.svc h3 { font-size:23px; margin:6px 0 10px; color:var(--ink); }
.svc p { font-size:15.5px; color:var(--body); }

/* expertise — navy band with icon cards --------------------- */
.expertise { background:linear-gradient(160deg,#0B5394 0%, #001C35 100%); color:#fff; position:relative; overflow:hidden; }
.expertise .section-head h2 { color:#fff; }
.expertise .section-head p { color:#bcd3e6; }
.exp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.exp { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:28px 24px; transition:transform .25s var(--ease), background .25s, border-color .25s; }
.exp:hover { transform:translateY(-5px); background:rgba(255,255,255,.10); border-color:rgba(79,195,232,.5); }
.exp .ico { width:46px; height:46px; border-radius:11px; background:rgba(79,195,232,.16);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.exp .ico svg { width:24px; height:24px; stroke:var(--cyan); fill:none; stroke-width:1.8; }
.exp h3 { color:#fff; font-size:19px; margin-bottom:8px; }
.exp p { color:#bcd3e6; font-size:14.5px; }

/* split feature (about teaser, etc.) ------------------------ */
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.media-right .media { order:2; }
.split .media img { border-radius:var(--radius); box-shadow:var(--shadow); }
.split h2 { font-size:clamp(28px,3.4vw,42px); margin-bottom:16px; }
.split p { margin-bottom:14px; }
.more { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent); margin-top:8px; }
.more:hover { text-decoration:none; }

/* ============================================================
   Page hero (subpages)
   ============================================================ */
.page-hero { background:linear-gradient(160deg,#0B5394 0%, #001C35 120%); color:#fff; position:relative; overflow:hidden; }
.page-hero .spectrum-edge { position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--spectrum); }
.page-hero .wrap { padding:50px 32px 40px; position:relative; }
.page-hero h1 { color:#fff; font-size:clamp(32px,4.4vw,50px); }
.page-hero p { color:#cfe0ee; margin-top:12px; max-width:62ch; }
.page-hero + section { padding-top:56px; }
.page-hero .watermark { position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:300px; opacity:.08; filter:brightness(0) invert(1); pointer-events:none; }

/* ============================================================
   Services detail (subpage)
   ============================================================ */
.service { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:84px; scroll-margin-top:90px; }
.service:last-child { margin-bottom:0; }
.service:nth-child(even) .media { order:2; }
.service .media img { border-radius:var(--radius); box-shadow:var(--shadow); }
.service h2 { font-size:clamp(26px,3.2vw,38px); margin-bottom:8px; }
.service .num { font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--accent); display:block; margin-bottom:6px; }
.service ul { margin:16px 0; padding-left:0; list-style:none; }
.service li { position:relative; padding-left:26px; margin-bottom:9px; color:var(--body); }
.service li::before { content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:50%;
  background:var(--spectrum); }
.service .note { color:var(--muted); font-size:14.5px; margin-top:12px; border-left:3px solid var(--bg-tint); padding-left:14px; }

/* ============================================================
   Bio
   ============================================================ */
.bio { display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:start; }
.bio p { margin-bottom:16px; }
.bio .portrait { position:sticky; top:96px; }
.bio .portrait img { border-radius:var(--radius); box-shadow:var(--shadow); }
.bio .portrait .cap { margin-top:14px; font-size:14px; color:var(--muted); }
.timeline-tag { display:inline-block; font-weight:700; color:var(--blue); }

/* ============================================================
   Clients
   ============================================================ */
.clients-layout { display:grid; grid-template-columns:1.55fr 1fr; gap:48px; align-items:start; }
.clients-head { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.clients-head h2 { font-size:clamp(24px,3vw,32px); }
.client-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px 28px; }
.client-grid { display:grid; grid-template-columns:repeat(2,1fr); }
.client-grid .cell { padding:14px 16px; border-bottom:1px solid var(--line);
  font-weight:600; color:var(--ink); font-size:15.5px; line-height:1.35;
  border-radius:6px; transition:background .2s; }
.client-grid .cell:hover { background:var(--bg-soft); }
.client-grid .cell:nth-last-child(-n+2) { border-bottom:none; }
.client-grid .cell small { color:var(--muted); font-weight:500; font-size:12.5px; letter-spacing:.04em;
  margin-left:8px; white-space:nowrap; }
.clients-figure { position:sticky; top:96px; margin:0; }
.clients-figure img { border-radius:var(--radius); box-shadow:var(--shadow); }
.clients-figure figcaption { margin-top:12px; font-size:14px; color:var(--muted); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:38px 40px; box-shadow:var(--shadow-sm); }
.contact-card .row { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.contact-card .row:last-child { border-bottom:none; }
.contact-card .row .ico { width:40px; height:40px; flex:none; border-radius:10px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; }
.contact-card .row .ico svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.8; }
.contact-card .row .k { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.contact-card .row .v { font-size:18px; color:var(--ink); font-weight:600; }
.contact-card .row .v a { color:var(--ink); }
.contact-card .row .v a:hover { color:var(--accent); }
.contact-media img { border-radius:var(--radius); box-shadow:var(--shadow); }

/* ============================================================
   CTA + Footer
   ============================================================ */
.cta { background:linear-gradient(120deg,#083f6e 0%, #001C35 100%); color:#fff; position:relative; overflow:hidden; padding:50px 0; }
.cta .spectrum-edge { position:absolute; left:0; right:0; top:0; height:5px; background:var(--spectrum); }
.cta .wrap { padding:10px 32px; text-align:center; position:relative; display:flex;
  flex-direction:column; align-items:center; gap:5px; }
.cta .kicker { margin-bottom:0; }

.site-footer { background:var(--navy); color:#9fb6c9; }
.footer-cta { border-bottom:1px solid rgba(255,255,255,.10); }
.footer-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:26px 32px; flex-wrap:wrap; }
.footer-cta .kicker { margin-bottom:0; font-size:22px; gap:16px; }
.footer-cta .kicker::before { width:46px; height:3px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  max-width:var(--max); margin:0 auto; padding:60px 32px 36px; }
.footer-brand { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-brand img { height:120px; }
.footer-brand .motto { color:#fff; font-size:20px; font-weight:600; line-height:1.25; max-width:18ch; }
.footer-cols { display:flex; gap:64px; flex-wrap:wrap; }
.footer-cols h4 { color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.footer-cols a, .footer-cols p { display:block; color:#9fb6c9; font-size:15px; margin-bottom:9px; }
.footer-cols a:hover { color:#fff; text-decoration:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.10); }
.footer-bottom .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; padding-bottom:28px; font-size:13px; color:#7d96aa; }
.footer-bottom a { color:#7d96aa; }

/* ============================================================
   Scroll reveal (progressive enhancement)
   ============================================================ */
html.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
  * { scroll-behavior:auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .exp-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  section { padding:68px 0; }
  .menu-btn { display:flex; }
  .nav { position:fixed; inset:0; width:100%; height:100vh; height:100dvh; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:90px 28px 36px; overflow-y:auto;
    transform:translateX(100%); transition:transform .32s var(--ease); z-index:65; }
  .nav.open { transform:none; }
  .nav a.link { font-size:21px; font-weight:600; color:var(--ink); padding:18px 6px;
    border-radius:0; border-bottom:1px solid var(--line); }
  .nav a.link:hover { background:transparent; color:var(--accent); }
  .nav a.link.active { color:var(--accent); }
  .nav a.link.active::after { display:none; }
  .nav .btn { margin:26px 6px 0; justify-content:center; font-size:18px; padding:16px 22px; }
  .svc-grid, .split, .service, .bio, .contact-grid, .clients-layout { grid-template-columns:1fr; gap:34px; }
  .split.media-right .media, .service:nth-child(even) .media { order:0; }
  .bio .portrait { position:static; max-width:440px; }
  .clients-figure { position:static; max-width:480px; }
  .client-grid { grid-template-columns:repeat(2,1fr); }
  .hero-inner { padding:26px 24px 28px; }
  .footer-top { gap:32px; }
  .footer-cta .wrap { justify-content:center; text-align:center; }
}
@media (max-width:520px){
  .wrap, .header-inner, .hero-inner, .footer-top { padding-left:20px; padding-right:20px; }
  .exp-grid, .client-grid { grid-template-columns:1fr; }
  .brand .name small { display:none; }
}