/* Arial scaled to Inter's metrics: text keeps its size and line breaks while Inter loads, so nothing shifts */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }
  :root {
    --bg: #131b1c;
    --bg-2: #1C2729;
    --surface: #243335;
    --line: #36494b;
    --text: #F7F6F5;
    --muted: #B2BEB5;
    --charge: #C8E480;
    --charge-dim: #C8E48033;
    --ink: #C8E480;
    --cable: #4a5e60;
    --hl: #C8E480; --hl-line: #C8E480; /* "On brand" in the hero h1 and its underline */
    --side: #1a2628; --side-edge: #151f21;
    --shadow: 0 30px 80px #00000066;
    --nav-bg: #131b1ccc;
    --marker: #84BD00;
    --chip-bg: color-mix(in srgb, var(--text) 9%, transparent);
    --accent: #85B110;
    --brand: #86B214;
    --brand-2: #A3C946;
    --radius: 18px;
    --head: Inter, "Inter Fallback", sans-serif;
    --max: 1180px;
  }
  :root[data-theme="light"] {
    --bg: #F3F2EE; --bg-2: #FFFFFF; --surface: #FFFFFF; --line: #D9DED6;
    --text: #1C2729; --muted: #5A6863; --charge: #B4D957; --charge-dim: #86B21433;
    --ink: #4D7A00; --cable: #1C2729; --shadow: 0 24px 60px #1C27291f; --nav-bg: #F3F2EEcc;
    --side: #E2E6DD; --side-edge: #D3D9CF;
    --hl: #699A00; --hl-line: #86B214;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
    --bg: #F3F2EE; --bg-2: #FFFFFF; --surface: #FFFFFF; --line: #D9DED6;
    --text: #1C2729; --muted: #5A6863; --charge: #B4D957; --charge-dim: #86B21433;
    --ink: #4D7A00; --cable: #1C2729; --shadow: 0 24px 60px #1C27291f; --nav-bg: #F3F2EEcc;
    --side: #E2E6DD; --side-edge: #D3D9CF;
    --hl: #699A00; --hl-line: #86B214;
    }
  }
  /* background chevron with round ends and tip; used as a mask so the colour comes from background */
  :root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 368 626'%3E%3Cpath d='M55 55L313 313L55 571' fill='none' stroke='%23000' stroke-width='110' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 Inter, "Inter Fallback", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .display { font-family: var(--head); line-height: 1.1; letter-spacing: -0.02em; }
  a { color: inherit; }
  button { font: inherit; color: inherit; cursor: pointer; }
  [hidden] { display: none !important; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
  section { padding: 110px 0; border-top: 1px solid var(--line); }
  .hero h1, .section-title { letter-spacing: -.03em; }
  .eyebrow { color: var(--ink); font: 500 13px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
  .section-title { font-size: clamp(32px, 5vw, 52px); max-width: 760px; margin-bottom: 18px; }
  .lead { color: var(--muted); max-width: 640px; font-size: 18px; }
  .placeholder { outline: 1px dashed #ff8a3d; outline-offset: 2px; }

  /* Nav */
  nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line);
  }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: flex; align-items: center; color: var(--text); }
  .logo svg { display: block; height: 22px; width: auto; aspect-ratio: 137 / 36.8; fill: currentColor; }
  .logo .chev { fill: #88B015; animation: chev-in .7s .3s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes chev-in { from { opacity: 0; transform: translateX(-14px); } }
  nav .btn { white-space: nowrap; height: 38px; display: inline-flex; align-items: center; padding: 0 18px; }
  @media (max-width: 600px) { .logo svg { height: 19px; } }
  /* menu type as on allego.eu: Inter Bold, -4% tracking, 26px apart; 85% / 90% / 100% of 14px by screen width */
  nav ul { display: flex; gap: 26px; list-style: none; font: 700 12.6px/1.15 var(--head); letter-spacing: -.04em; }
  @media (max-width: 1439px) { nav ul { font-size: 11.9px; } }
  @media (min-width: 1680px) { nav ul { font-size: 14px; } }
  nav ul a { text-decoration: none; color: var(--text); transition: color .2s; }
  nav ul a:hover, nav ul a.active { color: var(--ink); }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
    background: var(--charge); color: #1C2729; font-weight: 600; text-decoration: none; border: 0;
    transition: transform .2s, box-shadow .2s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--charge-dim); }
  .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .lang { position: relative; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; }
  .lang button { border: 0; background: none; padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--muted); }
  /* the green pill: a copy of the labels in the active colour, clipped to the active button (app.js sets --l/--r/--t/--b),
     so when it slides the letters change colour as it passes over them */
  .lang-pill { position: absolute; inset: 0; display: flex; gap: inherit; padding: inherit; border-radius: inherit; pointer-events: none;
    background: var(--charge); color: #1C2729; clip-path: inset(var(--t, 0) var(--r, 100%) var(--b, 0) var(--l, 0) round 99px); }
  .lang-pill.ready { transition: clip-path .4s cubic-bezier(.65, 0, .35, 1); }
  .lang-pill span { padding: 6px 10px; font-size: 12px; font-weight: 600; }
  @media (max-width: 860px) { nav ul { display: none; } }
  /* phone: the logo on the first line; language, light/dark mode and "Let's talk" on their own line below */
  @media (max-width: 600px) {
    nav .wrap { flex-wrap: wrap; height: auto; padding-block: 10px 8px; row-gap: 8px; }
    nav .wrap::after { content: ""; flex-basis: 100%; order: 3; }
    .nav-right { display: contents; }
    nav .wrap { padding-inline: 12px; }
    .logo { order: 1; } .lang { order: 4; } .theme-btn { order: 5; margin-right: auto; margin-left: 8px; width: 34px; height: 34px; } nav .btn { order: 6; height: 34px; padding: 0 14px; }
    .lang button, .lang-pill span { padding: 5px 10px; }
    html { scroll-padding-top: 112px; }
  }

  /* Hero */
  .hero { min-height: 100vh; display: grid; place-items: center; padding-top: 64px; border: 0; position: relative; overflow: hidden; }
  .hero::before, .hero::after {
    content: ""; position: absolute; width: 368px; height: 626px; top: calc(18% - 103px); right: calc(4% - 138px);
    background: var(--brand); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; opacity: .09;
  }
  .hero::after { width: 228px; height: 388px; top: calc(30% - 64px); right: calc(30% - 86px); opacity: .05; }
  .bubble {
    display: inline-block; position: relative; margin-bottom: 30px; padding: 10px 18px; border-radius: 14px;
    background: var(--brand); color: #fff; font: 700 15px var(--head); box-shadow: 0 10px 28px #86B21440;
  }
  .bubble::after { content: ""; position: absolute; left: 24px; bottom: -7px; width: 16px; height: 16px; background: var(--brand); border-radius: 3px; transform: rotate(45deg); }
  /* minmax(0, …): the columns keep their width while the card's content changes */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 60px; align-items: center; position: relative; }
  .hero h1 { font-size: clamp(38px, 5.4vw, 72px); margin-bottom: 24px; text-wrap: balance; }
  .hero h1 em { font-style: normal; color: var(--hl); }
  .hero .lead { margin-bottom: 36px; }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-intro .hero-ctas { clear: both; } /* below the floated photo, so the buttons get the full width */
  .charger {
    background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 32px;
    box-shadow: var(--shadow);
  }
  .charger-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 20px; flex-wrap: nowrap; }
  .charger-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #chargeState { flex: none; }
  #chargeState { padding: 3px 10px; border-radius: 99px; background: var(--charge-dim); color: var(--ink); font-weight: 600; }
  #chargeState:empty { visibility: hidden; }
  #chargeState:empty::before { content: "\00a0"; }
  /* status changes (app.js): the text fades, the label eases to its new width */
  #chargeState { display: inline-block; white-space: nowrap; overflow: hidden; text-align: center; }
  .charge-pct { font: 700 72px/1 var(--head); }
  .charge-pct small { font-size: 28px; color: var(--muted); }
  .charge-bar { height: 14px; background: var(--bg); border-radius: 99px; margin: 22px 0; overflow: hidden; }
  .charge-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--charge)); border-radius: inherit; transition: width .2s linear; }
  .charge-log { font-size: 13px; color: var(--muted); min-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .charge-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .charge-stats div { display: flex; flex-direction: column; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 8px; padding: 14px; }
  .charge-stats b { display: block; font: 700 24px var(--head); text-align: center; }
  /* labels share the space under the bar and sit in its middle, so one-line labels line up with two-line ones */
  .charge-stats span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1.1; text-align: center; color: var(--muted); }
  .charge-stats b { font-variant-numeric: tabular-nums; transition: color .3s; }
  .charge-stats .full b { color: var(--ink); }
  .stat-bar { display: block; height: 4px; margin: 8px 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
  .stat-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--charge)); }
  @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

  /* Match */
  .match { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-top: 56px; }
  .req-list { display: flex; flex-direction: column; gap: 10px; }
  .req {
    text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    transition: border-color .2s, background .2s;
  }
  .req:hover { border-color: var(--accent); }
  .req[aria-selected="true"] { border-color: var(--ink); background: var(--surface); }
  .req .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
  .req[aria-selected="true"] .dot { background: var(--charge); box-shadow: 0 0 12px var(--charge); }
  .evidence { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 30px 36px 36px; position: sticky; top: 90px; align-self: start; }
  .evidence h3 { font-size: 28px; margin-bottom: 12px; }
  .evidence p { color: var(--muted); margin-bottom: 20px; }
  .evidence ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .evidence li { padding-left: 22px; position: relative; }
  .evidence li::before { content: "⚡"; position: absolute; left: 0; font-size: 13px; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag { font-size: 12px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
  @media (max-width: 860px) { .match { grid-template-columns: 1fr; } .evidence { position: static; } }
  .evidence::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 22px; border-radius: 99px; background: var(--line); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
  .chip-app { padding: 4px 11px; border-radius: 99px; background: var(--chip-bg); font-size: 12px; font-weight: 500; }
  .chip-app.status { background: var(--marker); color: #fff; font-weight: 600; }
  .sheet-btn { width: 100%; padding: 15px 20px; border: 0; border-radius: 99px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 16px; }
  .sheet-btn:hover { opacity: .9; }
  /* App-style info banner */

  /* Work */
  .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0 32px; }
  .filter { padding: 9px 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; font-size: 14px; color: var(--muted); }
  .filter.on { background: var(--charge); color: #1C2729; border-color: var(--ink); }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    text-align: left; padding: 0; transition: transform .3s, opacity .3s;
  }
  .card:hover { transform: translateY(-6px); }
  .card.hide { display: none; }
  .thumb { aspect-ratio: 4/3; display: grid; place-items: center; font: 700 15px var(--head); color: #1C2729; position: relative; }
  .thumb::after { content: "Replace with project image"; position: absolute; bottom: 10px; right: 12px; font: 500 10px Inter; opacity: .55; }
  .card-body { padding: 20px 22px 24px; }
  .card-body h3 { font-size: 20px; margin-bottom: 6px; }
  .card-body p { color: var(--muted); font-size: 14px; }
  @media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  /* Project popup carousel: 16:9 slides, arrows and dots over the image */
  .m-show { position: relative; }
  .ss-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ss-track::-webkit-scrollbar { display: none; }
  .m-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; scroll-snap-align: start; margin: 0; display: grid; place-items: center; background: var(--bg); text-align: center; font-size: 14px; color: #1C2729; }
  .m-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .m-slide > span { padding: 0 56px; }
  .m-slide code { font-size: 12px; opacity: .7; overflow-wrap: anywhere; }
  .ss-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fffe; color: #1C2729; font-size: 24px; line-height: 1; box-shadow: 0 6px 20px #0002; }
  .ss-nav.prev { left: 16px; } .ss-nav.next { right: 16px; }
  .ss-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
  .ss-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #fff9; box-shadow: 0 1px 4px #0003; transition: width .3s, background .3s; }
  .ss-dots button.on { width: 26px; background: #fff; }
  .m-show.single .ss-nav, .m-show.single .ss-dots { display: none; }
  @media (max-width: 600px) { .ss-nav { width: 36px; height: 36px; font-size: 20px; } .ss-nav.prev { left: 8px; } .ss-nav.next { right: 8px; } }
  @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

  /* Modal */
  dialog { margin: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-2); color: var(--text); max-width: 860px; width: calc(100% - 32px); max-height: 88vh; padding: 0; }
  dialog::backdrop { background: #0e151699; backdrop-filter: blur(6px); }
  .modal-body { padding: 36px; }
  .modal-body h3 { font-size: 34px; margin-bottom: 8px; }
  .m-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .m-links:empty { display: none; }
  .case { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
  .case h4 { color: var(--ink); font: 500 12px var(--head); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
  .case p { color: var(--muted); font-size: 15px; }
  .close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1C2729aa; color: #fff; font-size: 20px; }
  @media (max-width: 600px) { .case { grid-template-columns: 1fr; } }
  /* phone: the project popup fills the screen, with less padding; the close button stays in view */
  @media (max-width: 600px) {
    #modal { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
    #modal .modal-body { padding: 20px 16px 32px; }
    #modal .modal-body h3 { font-size: 26px; }
    #modal .case { gap: 16px; margin-top: 20px; }
    #modal .close { position: fixed; top: 12px; right: 12px; }
  }

  /* Touchpoints */
  .tp { display: grid; gap: 16px; margin-top: 56px; }
  .tp .stage { position: relative; padding-top: 72px; } /* room for the markets in the corner */
  .tp-market { position: absolute; top: 16px; left: 0; right: 0; z-index: 1; justify-content: center; }
  #formatSeg, .tp-cars { justify-content: center; } /* all option rows centred */
  /* Brand system in action: header and text centred too */
  #touchpoints .qhead { justify-content: center; text-align: center; }
  #touchpoints .qhead .eyebrow { text-align: center; }
  #touchpoints .lead { margin-inline: auto; text-align: center; text-wrap: balance; }
  @media (max-width: 600px) { .tp .stage { padding: 16px; min-height: 0; align-content: start; } .seg.tp-market { position: static; justify-self: center; margin-bottom: 16px; gap: 6px; flex-wrap: nowrap; } .seg.tp-market button { padding: 7px 9px; } }
  .seg { display: flex; flex-wrap: wrap; gap: 8px; }
  .seg button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13px; } /* pill: radius = half the height */
  .seg button.on { background: #578300; border-color: #578300; color: #fff; } /* green that keeps white text readable (4.5:1) */
  .stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); min-height: 480px; display: grid; place-items: center; padding: 32px; }
  /* every size inside a banner is its design size × --s (the banner's own scale, set in app.js), so it shrinks as a whole */
  .asset {
    background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-radius: calc(14px * var(--s, 1));
    display: flex; flex-direction: column; justify-content: space-between; padding: calc(24px * var(--s, 1)); position: relative; overflow: hidden;
    transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1);
  }
  .asset::before { content: ""; position: absolute; width: 45%; aspect-ratio: 1; right: 8%; top: 50%; border: solid #fff; border-width: calc(26px * var(--s, 1)) calc(26px * var(--s, 1)) 0 0; transform: translateY(-50%) rotate(45deg); opacity: .18; }
  .asset .a-head { font: 700 calc(30px * var(--s, 1))/1.05 var(--head); position: relative; max-width: 90%; margin-top: auto; margin-bottom: calc(14px * var(--s, 1)); text-wrap: balance; }
  .asset.has-photo { background: linear-gradient(180deg, #1C272955 0%, transparent 28%, transparent 42%, #86B214f2 72%), url(img/campaign.jpg) center 30% / cover; }
  .asset.has-photo::before { display: none; }
  .asset.banner.has-photo { background: linear-gradient(90deg, #86B214 52%, #86B21400 74%), url(img/campaign.jpg) right center / 48% auto no-repeat, var(--brand); }
  .asset .a-head em { font-style: normal; color: #1C2729; }
  .asset .a-cta { align-self: flex-start; background: #fff; color: var(--brand); font-weight: 700; font-size: calc(13px * var(--s, 1)); padding: calc(8px * var(--s, 1)) calc(16px * var(--s, 1)); border-radius: calc(99px * var(--s, 1)); position: relative; }
  /* logo (top left) and format (top right) sit above both frames */
  .asset .a-logo { position: absolute; top: calc(18px * var(--s, 1)); left: calc(20px * var(--s, 1)); z-index: 4; width: clamp(calc(56px * var(--s, 1)), 30%, calc(92px * var(--s, 1))); height: auto; fill: #F6F5F4; filter: drop-shadow(0 calc(1px * var(--s, 1)) calc(6px * var(--s, 1)) #0004); }
  .asset .a-logo .chev { fill: #F6F5F4; animation: tp-chev 7s 1 forwards; } /* green over the road, light over the green end frame */
  @keyframes tp-chev { 0%, 44% { fill: #85B110; } 52%, 100% { fill: #F6F5F4; } }
  .asset .a-meta { position: absolute; top: calc(18px * var(--s, 1)); right: calc(20px * var(--s, 1)); z-index: 4; font-size: calc(11px * var(--s, 1)); color: #ffffffd9; text-shadow: 0 calc(1px * var(--s, 1)) calc(4px * var(--s, 1)) #0006; }
  .asset.banner { flex-direction: row; align-items: center; padding: calc(10px * var(--s, 1)) calc(20px * var(--s, 1)); }
  .asset.banner .a-head { margin: 0 auto 0 0; }
  .asset.banner .a-head { font-size: calc(18px * var(--s, 1)); }
  .asset.banner::before { display: none; }
  .asset.banner .a-logo { top: 50%; left: calc(16px * var(--s, 1)); translate: 0 -50%; width: calc(64px * var(--s, 1)); }
  .asset.banner .a-meta { top: calc(5px * var(--s, 1)); right: calc(12px * var(--s, 1)); font-size: calc(9px * var(--s, 1)); }
  .asset.banner .a-cta { margin-top: calc(14px * var(--s, 1)); padding: calc(6px * var(--s, 1)) calc(14px * var(--s, 1)); font-size: calc(12px * var(--s, 1)); }
  .asset.banner .a-head { margin-left: calc(76px * var(--s, 1)); }
  .seg button img { width: 18px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; object-fit: cover; }
  .photo-credit { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; }
  .stage-label { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }

  /* Variants */
  .variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .variant { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; }
  .variant.win { border-color: var(--ink); }
  .variant .badge { position: absolute; top: 18px; right: 18px; background: var(--charge); color: #1C2729; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px; opacity: 0; transition: opacity .4s; }
  .variant.win .badge { opacity: 1; }
  .v-visual { aspect-ratio: 1; border-radius: 12px; margin-bottom: 18px; display: grid; place-items: center; font: 700 18px var(--head); color: #1C2729; text-align: center; padding: 16px; }
  .v-bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; margin: 10px 0 6px; }
  .v-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
  .variant.win .v-bar span { background: var(--charge); }
  .v-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
  .v-row b { color: var(--text); }
  .note-small { font-size: 12px; color: var(--muted); margin-top: 20px; }
  @media (max-width: 600px) {
    .variants { grid-template-columns: 1fr; }
    /* mobile: the cards stack and each lies down, the visual at 50% on the left, title, bar and CTR on the right */
    .variant { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 16px; padding: 12px; }
    .variant .v-visual { grid-column: 1; grid-row: 1 / -1; margin: 0; }
    .variant h3 { grid-column: 2; grid-row: 2; }
    .variant .v-bar { grid-column: 2; grid-row: 3; }
    .variant .v-row { grid-column: 2; grid-row: 4; }
    .variant .badge { top: 12px; right: 12px; }
    .variant .v-visual.has-photo span { font-size: 12px; padding: 5px 10px; }
  }

  /* Toolkit */
  .tier { margin-top: 48px; }
  .tier h3 { font: 500 13px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
  .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
  .tool { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s, transform .2s; }
  .tool:hover { border-color: var(--ink); transform: translateY(-2px); }
  .tool img { width: 40px; height: 40px; object-fit: contain; flex: none; }
  .tool b { display: block; font-weight: 600; }
  .tool small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
  .tool.wide { grid-column: span 2; }
  .core .tool-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .core .tool { flex-direction: column; align-items: flex-start; padding: 22px; gap: 18px; }
  .core .tool img { width: 56px; height: 56px; }
  .core .tool b { font: 700 20px var(--head); }
  @media (max-width: 600px) { .tool.wide { grid-column: auto; } }
  .skills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
  .skills .tag { font-size: 14px; padding: 8px 16px; color: var(--text); }

  /* Process */
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 56px; counter-reset: s; }
  .step { border-top: 2px solid var(--line); padding-top: 20px; transition: border-color .3s; }
  .step:hover { border-color: var(--ink); }
  .step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--marker); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px #0003; font: 600 15px Inter, sans-serif; }
  .step h3 { font-size: 20px; margin-bottom: 8px; }
  .step p { color: var(--muted); font-size: 14px; }
  @media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }

  /* Contact */
  .contact { text-align: center; }
  .contact .section-title { margin: 0 auto 18px; }
  .contact .lead { margin: 0 auto 36px; }
  .contact .hero-ctas { justify-content: center; width: fit-content; margin: 0 auto 64px; position: relative; }
  .contact { background: linear-gradient(135deg, #C8E480, var(--brand-2)); color: #1C2729; border: 0; position: relative; overflow: hidden; }
  .contact::before { content: ""; position: absolute; width: 315px; height: 536px; left: 23px; top: 50%; transform: translateY(-50%); background: #fff; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; opacity: .25; }
  .contact .wrap { position: relative; }
  .contact .eyebrow, .contact .lead { color: #1C2729cc; }
  .contact .hand { color: #1C2729; }
  .contact .btn { background: #1C2729; color: #C8E480; }
  .contact .btn.ghost { background: transparent; color: #1C2729; border-color: #1C272966; }
  .contact .btn:hover { box-shadow: 0 10px 30px #1C272944; }
  footer { padding: 32px 0; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
  footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }


  /* Handwritten notes & doodles */
  .hand {
    font: 600 24px/1.1 "Caveat", cursive; color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
    transform: rotate(-3deg); pointer-events: none; user-select: none;
  }
  .hand svg, .doodle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .hand svg { width: 64px; height: 40px; }
  .doodle { color: var(--hl-line); }
  .scribble { position: relative; white-space: nowrap; }
  .scribble svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .3em; stroke-width: 4; }
  .scribble path { stroke-dasharray: 320; animation: draw 1.2s .8s ease-out both; }
  @keyframes draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

  /* Profile photo: a polaroid floated beside the lead (the text runs past it) */
  /* the charger reaches ~60px into this column: keep the title and photo clear of it */
  .hero-intro { display: flow-root; padding-right: 48px; }
  /* 56px right margin keeps it clear of the charger's cable in the next column */
  .hero-me { float: right; position: relative; width: 170px; height: 200px; margin: 6px 8px 8px 28px; }
  @media (max-width: 1100px) { .hero-me { margin-right: 0; } .hero-intro { max-width: 760px; padding-right: 0; } }
  .hero-side { position: relative; padding-top: 90px; }
  .photo {
    position: absolute; top: 0; right: 10px; z-index: 2; width: 150px; padding: 10px 10px 34px;
    background: #f4f1ea; border-radius: 4px; transform: rotate(5deg); box-shadow: 0 4px 4px rgba(0,0,0,0.05), 0 18px 40px rgba(0,0,0,0.1);
  }
  .photo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; background: #C8E48099; transform: translateX(-50%) rotate(-4deg); }
  .photo img, .photo .ph { display: block; width: 130px; height: 140px; object-fit: cover; object-position: 60% 25%; border-radius: 2px; }
  .photo .ph { background: #d9d4c7; color: #6b6457; display: grid; place-items: center; font-size: 12px; text-align: center; }
  .photo figcaption { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font: 600 19px "Caveat", cursive; color: #2b2b2b; }

  /* Proof links */
  .proof { background: none; border: 0; padding: 0; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .proof .view { font-size: 12px; color: var(--ink); white-space: nowrap; opacity: .7; transition: opacity .2s; }
  .proof:hover .label { text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 4px; }
  .proof:hover .view { opacity: 1; }

  /* Fullscreen carousel */
  .lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); }
  .lb[open] { display: grid; grid-template-rows: auto 1fr auto; }
  .lb-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; color: var(--muted); font-size: 14px; }
  .lb-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); font-size: 22px; line-height: 1; }
  .lb-btn:hover { border-color: var(--ink); }
  .lb-stage { position: relative; display: grid; place-items: center; padding: 0 84px; overflow: hidden; }
  .lb-stage > * { max-width: 100%; max-height: calc(100vh - 280px); object-fit: contain; border-radius: 10px; animation: fade .35s ease-out; }
  .lb-stage iframe { width: min(100%, 1280px); aspect-ratio: 16/9; height: auto; border: 0; }
  .lb-ph { width: min(100%, 900px); aspect-ratio: 16/9; border: 2px dashed var(--line); display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
  .lb-ph code { color: var(--ink); }
  .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  #lbPrev { left: 20px; } #lbNext { right: 20px; }
  .lb-info { width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 24px 28px; text-align: center; }
  .lb-info h3 { font-size: 26px; margin-bottom: 6px; }
  .lb-year { margin-left: 10px; padding: 3px 9px; border-radius: 99px; background: var(--brand); color: #fff; letter-spacing: .06em; }
  .lb-year:empty { display: none; }
  .lb-info p { color: var(--muted); }
  .lb-cap { color: var(--text) !important; font-size: 14px; margin-top: 10px; }
  .lb-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .lb-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); transition: width .3s, background .3s; }
  .lb-dots button.on { width: 26px; background: var(--charge); }
  @keyframes fade { from { opacity: 0; transform: scale(.98); } }
  @media (max-width: 600px) { .lb-stage { padding: 0 12px; } .lb-nav { top: auto; bottom: 8px; transform: none; } }

  /* Notes with arrows (positions are per note; arrows are computed in JS) */
  .has-notes { position: relative; }
  .note { position: absolute; z-index: 3; white-space: nowrap; }
  .note-arrow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
  .note-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .note-arrow .head { opacity: 0; transition: opacity .25s; }
  .note-arrow.done .head { opacity: 1; }
  .n-proof { top: -2px; right: -46px; z-index: 4; text-align: center; }
  @media (max-width: 1279px) { .n-proof { right: -8px; } }
  /* below the button, a little to the left; its arrow curves up to the button (curve "up") */
  .contact .note.n-coffee { position: absolute; top: calc(100% + 21px); left: -52px; margin: 0; transform: rotate(-5deg); transform-origin: left top; }
  .test-row { margin-top: 32px; display: flex; align-items: center; gap: 18px; min-height: 52px; }
  @media (max-width: 1100px) {
    .note { position: relative; inset: auto; display: flex; width: fit-content; margin: 24px 0; }
  }
  @media (max-width: 1100px) { .n-proof { display: none; } }
  @media (max-width: 600px) {
    /* phone: the photo smaller, with the title wrapping around it (app.js moves it before the h1); the charger close below the text */
    .hero-side { padding-top: 0; }
    .hero-grid { gap: 20px; }
    .hero .lead { margin-bottom: 24px; }
    .hero-me { float: right; width: 104px; height: 124px; margin: 4px 0 4px 12px; }
    .hero-me .photo { right: 0; width: 100px; padding: 6px 6px 22px; }
    .hero-me .photo::before { width: 44px; height: 14px; top: -7px; }
    .hero-me .photo img, .hero-me .photo .ph { width: 88px; height: 94px; }
    .hero-me .photo figcaption { font-size: 14px; bottom: 3px; }
  }

  /* Theme toggle */
  .theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; }
  .theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .theme-btn .sun { display: none; }
  :root[data-theme="light"] .theme-btn .sun { display: block; } :root[data-theme="light"] .theme-btn .moon { display: none; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-btn .sun { display: block; } :root:not([data-theme="dark"]) .theme-btn .moon { display: none; } }

  /* Allego charger in the hero: a render (img.ev) until charger3d.js swaps in the 3D canvas */
  .hero-side { padding-left: 150px; --ev-left: -140px; --ev-m: 180px; --ev-w: 320px; --ev-h: 500px; }
  .charger { position: relative; z-index: 2; container-type: inline-size; }
  .ev { position: absolute; left: var(--ev-left); bottom: -14px; width: var(--ev-w); height: var(--ev-h); z-index: 1; touch-action: pan-y; user-select: none; }
  /* the canvas reaches --ev-m past the image on every side so nothing gets cut off (charger3d.js widens the camera
     to match); it lets clicks through, charger3d.js handles them on .hero-side */
  .ev3d { position: absolute; left: calc(var(--ev-left) - var(--ev-m)); bottom: calc(-14px - var(--ev-m));
    width: calc(var(--ev-w) + 2 * var(--ev-m)); height: calc(var(--ev-h) + 2 * var(--ev-m)); z-index: 3; opacity: 0; pointer-events: none; }
  /* same camera as the render, so charger3d.js swaps them in one paint, without a fade */
  .has-3d .ev3d { opacity: 1; }
  .has-3d .ev { opacity: 0; }
  /* The card has depth: a side face (stacked shadows) with a socket the plug goes into */
  .hero-side .charger {
    box-shadow: -2px -.75px 0 var(--side), -4px -1.5px 0 var(--side), -6px -2.25px 0 var(--side), -8px -3px 0 var(--side),
      -10px -3.75px 0 var(--side), -12px -4.5px 0 var(--side), -14px -5.25px 0 var(--side), -16px -6px 0 var(--side-edge), var(--shadow);
  }
  .socket { position: absolute; left: -14px; top: calc(60% - 17px); width: 10px; height: 22px; border-radius: 4px;
    background: #10181a; box-shadow: inset 0 0 0 2px #2b3a3c; transform: skewY(20.6deg); }
  @media (min-width: 601px) and (max-width: 1100px) { .hero-side { padding-left: 250px; --ev-left: -40px; } .hero-side .charger { max-width: 520px; } }
  /* phone: a smaller charger next to a narrower card, the three stats under each other */
  @media (max-width: 600px) {
    .hero-side { padding-left: 132px; --ev-w: 200px; --ev-h: 312px; --ev-left: -50px; --ev-m: 110px; }
  }
  @media (max-width: 359px) {
    .hero-side { padding-left: 112px; --ev-left: -64px; }
    .hero-me { width: 82px; height: 100px; margin-left: 8px; }
    .hero-me .photo { width: 80px; padding: 5px 5px 18px; }
    .hero-me .photo img, .hero-me .photo .ph { width: 70px; height: 76px; }
    .hero-me .photo figcaption { font-size: 12px; bottom: 2px; }
  }

  /* Car + charging icons */
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .a-car { position: absolute; right: 6%; bottom: 18%; width: 42%; fill: #fff; opacity: .9; }
  .asset > div { z-index: 1; }
  .asset.banner .a-car { display: none; }
  /* Frame 1 (personalised): road + chosen car + question, fades to the end frame (the banner under it) and stays there.
     With reduced motion there is no animation and the end frame shows. */
  .asset .a-intro { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: url(img/cars/road.webp) center / cover; opacity: 0; animation: tp-intro 7s 1 forwards; }
  /* the green glow lies over the car (the question stays on top) */
  .asset .a-intro::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #1C272966 0%, transparent 30%, transparent 55%, #86B214b3 100%); }
  .a-intro .a-ask { z-index: 2; }
  .a-intro .a-ask { position: absolute; top: calc(calc(18px * var(--s, 1)) + calc(44px * var(--s, 1))); left: calc(20px * var(--s, 1)); right: calc(20px * var(--s, 1)); margin: 0; font: 700 calc(30px * var(--s, 1))/1.05 var(--head); text-wrap: balance; color: #fff; text-shadow: 0 calc(2px * var(--s, 1)) calc(12px * var(--s, 1)) #0006; opacity: 0; animation: tp-ask 7s 1 forwards; }
  /* car width per format (--w) × a per-car factor (--k, CAR_SCALE in app.js) */
  .a-intro .a-drive { position: absolute; left: 14%; bottom: 7%; --w: 68%; width: calc(var(--w) * var(--k, 1)); animation: tp-drive 7s 1 forwards cubic-bezier(.2, .75, .25, 1); }
  @keyframes tp-intro { 0%, 44% { opacity: 1; } 52%, 100% { opacity: 0; } }
  /* grows out of the vanishing point (transform-origin set in app.js), so it comes in along the road */
  /* starts .1s after the question (7s timeline: 1% = 70ms) */
  .a-intro .a-body { display: block; width: 100%; }
  /* rims: a circle that spins, squashed back into the rim's ellipse by its wrapper (app.js); slows down with the car
     and stops after whole turns, so it ends exactly on the photo */
  .a-wheel { position: absolute; aspect-ratio: 1; transform-origin: 50% 50%; }
  .a-wheel img { display: block; width: 100%; height: 100%; animation: tp-spin 7s 1 forwards cubic-bezier(.2, .75, .25, 1); }
  @keyframes tp-spin { 0%, 2.4% { transform: rotate(0); } 20%, 100% { transform: rotate(-1440deg); } }
  @keyframes tp-drive { 0%, 2.4% { transform: scale(var(--s0, .04)); opacity: 0; } 4% { opacity: 1; } 20%, 100% { transform: none; } }
  /* the question comes first, then the car drives in */
  @keyframes tp-ask { 0%, 1% { opacity: 0; transform: translateY(8px); } 8%, 100% { opacity: 1; transform: none; } }
  .asset.banner .a-intro .a-ask { top: 50%; left: calc(96px * var(--s, 1)); right: auto; translate: 0 -50%; font-size: calc(18px * var(--s, 1)); }
  /* banner: like the end frame, the road photo fills the height on the right, green fades in from the left */
  .asset.banner .a-intro { background: url(img/cars/road.webp) right 55% / 48% auto no-repeat, #86B214; }
  .asset.banner .a-intro::after { background: linear-gradient(90deg, #86B214 52%, #86B21400 74%); }
  .a-intro.hold, .a-intro.hold * { animation-play-state: paused; } /* waits for the asset's resize, see app.js */
  .asset.banner .a-logo .chev { animation: none; } /* both banner frames are green on the left */
  .asset.banner .a-intro .a-drive { width: auto; height: 74%; bottom: 8%; left: auto; right: 8%; }
  /* car size per format */
  .asset.story .a-intro .a-drive { --w: 78%; left: 8%; }
  .asset.linkedin .a-intro .a-drive { --w: 42%; left: 50%; }
  /* more of the trees and sky, and the road 60px (of 272) higher: in container units, so it is right from the
     first frame and scales with the asset (app.js uses the same numbers to place the car) */
  .asset { container-type: size; }
  .asset.linkedin .a-intro { background-position: center calc(44% - 26.79cqh); } /* cqh = content height (272 - 2×24 padding): 60px */
  .asset.linkedin .a-intro::after { background: linear-gradient(180deg, #1C272966 0%, transparent 30%, transparent 78%, #86B21499 100%); }
  .asset.screen .a-intro .a-drive { --w: 42%; left: 48%; }
  .asset.signage .a-intro .a-drive { --w: 70%; left: 12%; }
  .seg button img.car { width: 34px; height: 16px; object-fit: contain; margin-right: 6px; vertical-align: -3px; border-radius: 0; }
  .tp-cars { margin-top: 16px; }
  .v-visual { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
  .v-icon { width: 54px; height: 54px; fill: currentColor; }
  .v-visual.has-photo { justify-content: flex-end !important; align-items: flex-start !important; background-size: cover !important; background-position: center !important; }
  .v-visual.has-photo .v-icon { display: none; }
  .v-visual.has-photo span { background: #fff; color: #1C2729; padding: 6px 12px; border-radius: 99px; font-size: 14px; text-align: left; }
  .thumb.has-photo { background-size: cover !important; background-position: center !important; place-items: end start; padding: 14px; }
  .thumb.has-photo::after { display: none; }
  .thumb.has-photo > span { background: #fff; padding: 5px 11px; border-radius: 99px; font-size: 12px; }

  /* Road with a car along the process steps */
  .steps { position: relative; padding-top: 44px; }
  .road { position: absolute; left: 0; right: 0; top: 16px; height: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 18px, transparent 18px 30px); }
  .road-car { position: absolute; left: 0; top: -22px; width: 58px; height: 24px; fill: var(--ink); transition: left 1.8s cubic-bezier(.5,0,.2,1); }

  /* Device frames in the proof viewer */
  .lb-top { gap: 16px; }
  .lb-169 { width: min(100%, 1200px, (100vh - 300px) * 16 / 9); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #111; }
  .lb-169 > * { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
  .lb-169 .lb-ph { display: grid; width: 100%; border: 0; background: var(--bg-2); }

  /* Brands bar */
  .brands { padding: 36px 0; }
  .brand-logo { fill: currentColor; flex: none; }
  .wordmark { font: 700 19px/1 var(--head); letter-spacing: -.01em; white-space: nowrap; }
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  .set { display: flex; align-items: center; gap: 52px; padding-right: 52px; color: var(--muted); }
  .set > * { transition: color .2s; } .set > *:hover { color: var(--text); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
  .reveal.in { opacity: 1; transform: none; }
  /* language switch (app.js): short crossfade, and the menu's contact button eases to its new width */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  /* the language toggle animates itself (sliding pill), so it stays out of the crossfade */
  .lang { view-transition-name: lang; }
  ::view-transition-old(lang) { display: none; }
  ::view-transition-new(lang) { animation: none; }
  .nav-cta { overflow: hidden; justify-content: center; transition: transform .2s, box-shadow .2s, width .35s cubic-bezier(.3, 0, .2, 1); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }

/* ===== Quick version (index.html): based on the FigCraft frame "Scanbaar · Optie 5: Inter" ===== */
.quick .hero { min-height: auto; padding: 130px 0 72px; }
.quick .hero h1 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.03em; }
.quick-sec { padding: 72px 0; }
.qhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 24px; }
.qhead .eyebrow { margin: 0; flex-basis: 100%; }
.qh2 { font: 500 28px/1.2 var(--head); letter-spacing: -.01em; }
.quick-sec .lead { font-size: 16px; }
.quick-sec .tp, .quick-sec .variants { margin-top: 32px; }
.qhint { margin-left: auto; font-size: 14px; color: var(--muted); }
.tools-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px 24px; }
.grid.compact { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid.compact .thumb { aspect-ratio: 16 / 9; font-size: 13px; }
.grid.compact .card-body { padding: 14px 16px 18px; }
.grid.compact .card-body h3 { font-size: 16px; }
.grid.compact .card-body p { font-size: 13px; }
@media (max-width: 960px) { .grid.compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid.compact { grid-template-columns: 1fr; } }
/* Selected work: the vacancy requirements as filters and as labels on every card */
.work-filters { margin: 0 0 24px; gap: 8px; }
.work-filters .filter { font-size: 13px; padding: 7px 14px; }
.filter .n { font-size: 11px; opacity: .6; margin-left: 2px; }
.grid.compact .card { display: flex; flex-direction: column; text-align: left; }
.grid.compact .card.hide { display: none; }
.grid.compact .card-body { flex: 1; display: flex; flex-direction: column; }
/* requirement labels above the title: a green check per requirement */
.req-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.req-labels li { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1.2 Inter, sans-serif; color: var(--text); padding: 3px 9px 3px 3px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--marker) 45%, transparent); background: var(--surface); }
.req-labels li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--marker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.card .req-labels { margin-bottom: 10px; }
.m-reqs .req-labels { margin: 6px 0 10px; }
.m-reqs .req-labels li { font-size: 12px; padding: 4px 11px 4px 4px; }
.m-reqs .req-labels li::before { width: 17px; height: 17px; }
.thumb.has-svg { place-items: center; }
.thumb.has-svg::after { display: none; }
.thumb.has-svg > span { position: absolute; left: 14px; bottom: 14px; background: #fff; padding: 5px 11px; border-radius: 99px; font-size: 12px; box-shadow: 0 0 0 1px #1C27291a; }
.thumb-svg { width: 58%; }
.thumb-svg svg, .m-svg svg { width: 100%; height: auto; display: block; }
.m-slide.m-svg { background: #fff; }
.m-slide.m-svg svg { width: 42%; }
.m-slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg-2); }
@media (max-width: 600px) {
  .work-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 20px; padding: 0 16px; }
  .work-filters::-webkit-scrollbar { display: none; }
  .work-filters .filter { flex: none; }
  .req-labels li { max-width: 100%; }
}
.tool-mini { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.tool-mini img { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 600px) { .tools-mini { grid-template-columns: 1fr 1fr; gap: 14px 16px; } .tool-mini { font-size: 13px; } }
.nav-switch { color: var(--ink) !important; }
@media (max-width: 760px) {
  .qhint { margin-left: 0; }
}

/* sections: headings, intros and filters centred */
.quick-sec .qhead { justify-content: center; text-align: center; }
.quick-sec .qhead .eyebrow { text-align: center; }
.quick-sec .lead { margin-inline: auto; text-align: center; text-wrap: balance; }
.quick-sec .test-row, .work-filters { justify-content: center; }
.quick-sec .note-small { text-align: center; }
@media (max-width: 600px) { .work-filters { justify-content: flex-start; } }

/* the session card adapts to its own width (container queries), so nothing jumps while it charges */
.charge-stats b { min-width: 3ch; }
@container (max-width: 380px) {
  .charger-top { font-size: 12px; margin-bottom: 14px; }
  .charge-pct { font-size: 56px; } .charge-pct small { font-size: 22px; }
  .charge-bar { height: 12px; margin: 16px 0; }
}
@container (max-width: 300px) {
  .charger-top { font-size: 11px; margin-bottom: 12px; }
  .charge-pct { font-size: 46px; } .charge-pct small { font-size: 20px; }
  .charge-bar { height: 10px; margin: 14px 0; }
  .charge-log { font-size: 12px; }
  .charge-stats { grid-template-columns: 1fr; gap: 6px; margin-top: 14px; }
  .charge-stats div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 8px 10px; }
  .charge-stats b { font-size: 18px; text-align: left; grid-row: span 2; }
  .charge-stats span { justify-content: flex-start; text-align: left; font-size: 11px; }
  .charge-stats .stat-bar { margin: 0 0 4px; }
}
@media (max-width: 600px) { .hero-side .charger { padding: 18px 16px; border-radius: 20px; } }

/* before / after slide: the after image is revealed up to --x; the invisible range input takes the drag */
.m-compare { position: relative; overflow: hidden; --x: 50%; background: var(--bg-2); }
.m-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cmp-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px #1C272933, 0 0 16px #0004; pointer-events: none; }
.cmp-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--marker); color: #fff; font: 700 16px/44px Inter, sans-serif; text-align: center; letter-spacing: 2px; box-shadow: 0 4px 14px #0003; }
.m-compare .cmp-label { position: absolute; bottom: 14px; padding: 5px 11px; border-radius: 99px; background: #1C2729cc; color: #fff; font: 600 12px Inter, sans-serif; pointer-events: none; }
.m-compare .cmp-label.before { left: 14px; } .m-compare .cmp-label.after { right: 14px; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); pointer-events: none; }
.m-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: none; -webkit-appearance: none; appearance: none; }
.m-compare input::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100vh; }
.m-compare input::-moz-range-thumb { width: 60px; height: 100vh; border: 0; }

/* several animated images on one slide, centred in two rows (the What to Wear weather icons) */
.m-slide.m-grid { display: grid; place-items: center; }
.m-grid > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2% 3%; width: 84%; }
.m-grid > div img { width: 100%; height: auto; object-fit: contain; }

/* the page doesn't get narrower than 320px */
html, body { min-width: 320px; }

/* phones: the title scales with the screen, so its longest word ("Campagnes,") always fits next to the photo */
@media (max-width: 600px) { .quick .hero h1 { font-size: min(38px, calc((100vw - 166px) / 6.4)); text-wrap: wrap; } }
@media (max-width: 359px) { .quick .hero h1 { font-size: min(32px, calc((100vw - 140px) / 6.4)); } }

/* card covers: a real <img> (srcset picks the size), under the category label */
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb > span { position: relative; z-index: 1; }