/* Phone layer for the whole site, subpages and homepage. Loaded last. The idea: no stacks of text blocks.
   Card grids and step rows become swipe rows with a progress line, long text folds behind a toggle,
   the timeline opens one step at a time, the call to action docks at the bottom, the footer is compact.
   Breakpoint 759px, the same as the stack mode of the homepage roll. Homepage rules use attribute
   selectors and !important because that page is styled inline. */

.swipe-progress, .more-btn, .hand-switch { display: none; }

@media (max-width: 759px) {
  :root { --gutter: 20px; --section-y: 56px; }
  .lead { margin-bottom: 24px; }
  .lead h2, .h2 { font-size: 28px; line-height: 1.1; }
  .hero { padding: 4px 12px 12px; }
  .hero.hero--full .panel { min-height: 0; }
  /* dvh is the visible height on a phone (the browser bars move), so the stage never runs under the docked button */
  /* the stage ends above the docked button (12px gap, 52px button, 12px to the edge), so nothing overlaps */
  .story--inset .story-stage { margin: 0 12px; border-radius: 20px; top: calc(var(--nav-h) + 8px); min-height: 380px; height: calc(100vh - var(--nav-h) - 84px); height: calc(100dvh - var(--nav-h) - 84px - env(safe-area-inset-bottom, 0px)); }
  /* the story start is a firm stop, so a hard swipe from the hero does not fly past the first modules */
  html:has(.story--gated) { scroll-snap-type: y proximity; }
  .story--gated { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: calc(var(--nav-h) + 8px); }
  .site-footer .brandcol img { height: 28px; }
  .hero .panel { border-radius: 20px; padding: 48px 20px; min-height: 0; }
  .hero h1 { font-size: 36px; line-height: 1.04; }
  .hero p { font-size: 16px; margin-bottom: 24px; }
  .hero .actions .btn { height: 48px; }

  /* Swipe rows: card grids and step rows scroll sideways, the next card peeks in */
  .grid, .steps, .plans, [data-swipe] { display: flex !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: stretch; }
  .grid::-webkit-scrollbar, .steps::-webkit-scrollbar, .plans::-webkit-scrollbar, [data-swipe]::-webkit-scrollbar { display: none; }
  .grid > *, .steps > .step, .plans > .plan { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
  .plans > .plan { flex-basis: 84%; }
  .plans { perspective: none; margin-bottom: 0; }
  .reveal-group.in > .plan, .reveal-group.in > .plan--main { transform: none; }
  .plan--main { border-width: 1px; border-color: var(--kobalt); padding-top: 34px; }
  .grid--bento > .card { grid-column: auto; padding: 20px; }
  .grid > .card { padding: 20px; gap: 8px; }
  .swipe-progress { display: flex; gap: 6px; margin-top: 16px; }
  .swipe-progress span { flex: 0 1 28px; height: 3px; border-radius: 2px; background: var(--lijn); transition: background-color .25s ease; }
  .swipe-progress span.on { background: var(--kobalt); }
  .on-dark + .swipe-progress span { background: rgba(255,255,255,.3); }

  /* Steps as cards, with their scene above the row following the card in view */
  .steps > .step, .steps--scene .step { border: 1px solid var(--lijn); border-radius: 16px; background: var(--papier); padding: 20px; transition: border-color .25s ease; }
  .section--nevel .steps > .step { background: var(--papier); }
  .steps--scene .step::before { content: none; }
  .steps--scene .step.is-on { border-color: var(--kobalt); }
  .steps--scene .step .n { margin: 0 0 8px; padding: 5px 8px; background: var(--kobalt-tint); color: var(--kobalt); }
  .steps--scene .step.is-on .n { background: var(--kobalt); color: var(--papier); }
  .steps-scene { display: block !important; margin: 0 0 12px; }
  .steps-scene--track { height: 150px; }
  .steps-scene--orbit { height: 230px; }
  .steps-scene--pillars { height: 190px; }
  .steps-scene--cube { height: 200px; display: flex !important; margin-bottom: 40px; }
  .cube-scene { width: 120px; height: 120px; }
  .face--front { transform: translateZ(60px); } .face--right { transform: rotateY(90deg) translateZ(60px); } .face--top { transform: rotateX(90deg) translateZ(60px); } .face--back { transform: rotateY(180deg) translateZ(60px); } .face--left { transform: rotateY(-90deg) translateZ(60px); } .face--bottom { transform: rotateX(-90deg) translateZ(60px); }
  .cube .face { font-size: 20px; }
  .cube-shadow { width: 170px; margin-left: -85px; bottom: -36px; height: 40px; }

  /* Facts: only the keyword, as a chip */
  .facts, .facts:has(> :nth-child(4)) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .facts li { font-size: 0; line-height: 0; padding: 9px 12px 9px 18px; border-radius: 999px; }
  .facts li::before { left: 9px; top: 50%; height: 12px; margin-top: -6px; }
  .facts .k { font-size: 14px; line-height: 1.2; margin: 0; font-weight: 500; }

  /* Long text folds behind a toggle */
  .clamp:not(.open) > p:not(.big):not(.plan):not(.muted) ~ p:not(.muted) { display: none; }
  .more-btn { display: inline-flex; align-items: center; gap: 6px; appearance: none; border: 0; background: transparent; padding: 10px 0; margin: -4px 0 8px; min-height: 44px; font: 500 15px/1 var(--font-sans); color: var(--kobalt); cursor: pointer; }
  .more-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
  .open > .more-btn::after { transform: rotate(-135deg) translateY(-2px); }
  .prose .big { font-size: 22px; margin-bottom: 20px; }
  .story-why { gap: 24px; }
  .why { padding: 24px; border-radius: 16px; }

  /* Tabs: one row of pills that scrolls sideways, the panel under it */
  .tabs { gap: 20px; }
  .tablist { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; border: 0; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .tablist::-webkit-scrollbar { display: none; }
  .tablist button { flex: none; border: 1px solid var(--lijn); border-radius: 999px; margin: 0; padding: 0 14px; height: 44px; font-size: 14px; white-space: nowrap; background: var(--papier); }
  .tablist button[aria-selected="true"] { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
  .tablist button[aria-selected="true"] svg { color: var(--papier); }
  .tabpanel { gap: 20px; }
  .tabpanel h2 { font-size: 24px; }

  /* Timeline: one step open at a time, tap a step to open it */
  .timeline li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 12px; padding: 16px 0; cursor: pointer; }
  .timeline .when { grid-column: 2; grid-row: 1; padding: 0; font-size: 12px; }
  .timeline .dot { grid-column: 1; grid-row: 1 / span 2; margin-top: 4px; }
  .timeline li > div { grid-column: 2; grid-row: 2; }
  .timeline h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; }
  .timeline h3::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--grafiet); border-bottom: 2px solid var(--grafiet); transform: rotate(45deg); transition: transform .2s ease; }
  .timeline li.open h3::after { transform: rotate(-135deg); border-color: var(--kobalt); }
  .timeline li:not(.open) p { display: none; }
  .timeline li.open p { margin-top: 8px; }
  .timeline li.open .dot { background: var(--kobalt); border-color: var(--kobalt); }

  /* Handover: a switch between the two cards */
  .hand-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: var(--nevel); border: 1px solid var(--lijn); }
  .hand-switch button { appearance: none; border: 0; border-radius: 8px; height: 44px; background: transparent; font: 500 15px/1 var(--font-sans); color: var(--grafiet); cursor: pointer; }
  .hand-switch button[aria-pressed="true"] { background: var(--papier); color: var(--inkt); box-shadow: 0 1px 3px rgba(28,28,30,.12); }
  .handover { grid-template-columns: 1fr; }
  .handover[data-show="0"] > .hand:nth-child(2), .handover[data-show="1"] > .hand:nth-child(1) { display: none; }
  .hand { padding: 20px; }
  .hand-head h3 { font-size: 18px; }
  .hand-list .d { display: none; }
  .hand-list li { padding: 12px 0; align-items: center; }

  /* Contact cards stay stacked, compact: icon left, text right */
  .contact-grid { gap: 12px; }
  .contact-grid .card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; padding: 16px; align-items: center; }
  .contact-grid .card .icon { grid-row: 1 / span 3; align-self: start; }
  .contact-grid .card > :not(.icon) { grid-column: 2; }

  /* Splits, quote builder and the call to action band */
  .split { gap: 24px; }
  .split h2 { font-size: 26px; }
  .quote { gap: 24px; }
  .quote-summary { position: static; padding: 20px; }
  .cta-band .panel { padding: 56px 20px; border-radius: 20px; }
  .journey-canvas, .box3d canvas { height: 260px; }

  /* The product story: progress at the top, the card above the docked button, a tighter orbit */
  .story-progress { top: 14px; bottom: auto; }
  .story-progress .seg { width: 14px; }
  /* a compact card that stays clear of the docked button: icon and name on one row, one line, the link */
  .story-card, .story-card--left, .story-card--right { bottom: 14px; left: 14px; right: 14px; padding: 14px 16px; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
  .story-card .ic { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; }
  .story-card .n { grid-column: 2; grid-row: 1; margin: 0; font-size: 12px; }
  .story-card h3 { grid-column: 2; grid-row: 2; font-size: 19px; margin: 0; }
  .story-card p { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; line-height: 1.4; }
  .story-card a { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .orb-chip { font-size: 11px; padding: 4px 8px 4px 6px; }
  .orb-chip.on.back { opacity: 0; }
  .story-step { height: 62vh; }
  .story-end { height: 72vh; }

  /* The call to action docks at the bottom, full width */
  .float-cta { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fab { display: flex; width: 100%; box-sizing: border-box; justify-content: center; border-radius: 16px; padding: 0 16px 0 8px; }

  /* Footer: two columns, brand on top */
  .site-footer { padding: 0 12px; }
  .site-footer .inner { padding: 32px 20px 24px; border-radius: 20px 20px 0 0; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .site-footer .brandcol { grid-column: 1 / -1; }
  .site-footer .brandcol p { margin-bottom: 8px; }
  .site-footer .col a, .site-footer .col .plain { margin-bottom: 12px; }
  .site-footer .bottom { margin-top: 24px; padding-bottom: 8px; }

  /* Homepage (inline styled): same ideas through attribute selectors */
  [data-story] { height: 400vh !important; }
  header[data-tone] { transition: background-color .3s ease; }
  header[data-tone="light"] { background: rgba(255,255,255,.92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  /* over the dark stage nothing scrolls under the header, so it needs no bar there (a bar showed as a box) */
  header[data-tone="dark"] { background: transparent !important; }
  [data-floatcta] { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  [data-rollt] .pill-list { display: none !important; }
  [data-rollt][data-card] { background: var(--nevel); border: 1px solid var(--lijn); border-radius: 16px; padding: 20px !important; }
  .map-chip:not(.on) { opacity: 0; }
  .map-lines line:not(.on) { opacity: 0; }
  [data-rollmap] { aspect-ratio: 5 / 4 !important; }
  [data-magic] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin-inline: -6vw; padding-inline: 6vw; scroll-padding-inline: 6vw; scrollbar-width: none; align-items: stretch; }
  [data-magic]::-webkit-scrollbar { display: none; }
  [data-magic] > * { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; opacity: 1 !important; transform: none !important; }
  [data-faqhead] { position: static !important; }
  [data-footcols] { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  [data-footwrap] { padding: 32px 20px 24px !important; border-radius: 20px 20px 0 0 !important; gap: 28px !important; }
  #resultaten, #vragen { padding: 64px 6vw !important; }
  #over { padding: 8px 6vw 64px !important; }
  #gesprek { padding: 72px 6vw !important; }
}

@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .swipe-progress span, .more-btn::after, .timeline h3::after { transition: none; }
}

/* Homepage roll on a phone: the progress line of the feature cards lines up with the cards */
@media (max-width: 759px) {
  [data-rollstage] > .swipe-progress { margin: 0 6vw; }
  [data-footcols] { grid-column: auto !important; }
  #resultaten .swipe-progress { margin-top: 16px; }
}

/* The labels of the homepage map may not widen the page on a phone */
@media (max-width: 759px) { [data-rollstage] { overflow-x: clip !important; } }

/* Homepage "hoe het werkt" on a phone: the four step names in a fixed two by two block, one shared text
   area under it where only the text of the step in view shows, and the dashboard below. Nothing changes
   size between steps, so nothing shifts or overlaps while scrolling. */
@media (max-width: 759px) {
  [data-panel] [data-steps] { top: 84px !important; gap: 10px !important; }
  [data-panel] [data-steps] > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; row-gap: 0 !important; }
  [data-panel] [data-steps] [data-step] { display: contents !important; }
  [data-panel] [data-steps] [data-step] > div:first-child { border-top: 1px solid var(--hero-line, var(--lijn)); padding: 8px 0; gap: 8px !important; opacity: .5; transition: opacity .25s ease, border-color .25s ease; }
  [data-panel] [data-steps] [data-step][data-on="1"] > div:first-child { opacity: 1; }
  [data-panel] [data-steps] [data-step][data-done="1"] > div:first-child { border-top-color: var(--hero-fg, var(--inkt)); }
  [data-panel] [data-steps] [data-step] h3 { font-size: 17px !important; }
  /* the texts share one cell: the old one is gone before the new one appears */
  [data-panel] [data-steps] [data-stepbody] { grid-column: 1 / -1; grid-row: 3; height: auto !important; min-height: 57px; padding-top: 4px; transition: opacity .12s ease !important; }
  [data-panel] [data-steps] [data-step][data-on="1"] > [data-stepbody] { transition: opacity .28s ease .14s !important; }
  [data-panel] [data-steps] [data-stepbody] p { font-size: 13px !important; line-height: 1.45 !important; }
  [data-win] { width: 96vw !important; }
  /* a quick, clean switch between the two dashboard screens */
  [data-scr-b] { background: var(--papier); }
  [data-scr-a], [data-scr-b], [data-ov-notes], [data-ov-sent] { transition-duration: .2s !important; }
}

/* The scroll scene on a phone: the stage ends above the docked button, the text sits at the bottom of the stage
   with a dark gradient, the captions and the block sit higher up */
@media (max-width: 759px) {
  .calls { height: 500vh; }
  .calls-frame { top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); padding: 8px 12px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .calls-stage { border-radius: 20px; }
  .calls-text { left: 16px; right: 16px; top: auto; bottom: 16px; transform: none; width: auto; }
  .calls-text::before { inset: -56px -16px -16px -16px; background: linear-gradient(to top, rgba(10,12,28,.94) 0%, rgba(10,12,28,.72) 55%, transparent 100%); }
  .calls-eyebrow { margin-bottom: 10px; }
  .calls-text h2 { font-size: 26px; margin-bottom: 10px; }
  .calls-text p { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
  .calls-beat--big { left: 50%; top: 34%; font-size: clamp(40px, 13vw, 64px); }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .calls-frame { height: 70vh; min-height: 480px; } }