/*  qblogics.com
 *  One typeface (Source Serif 4), a palette sampled from the hero artwork,
 *  and no motion beyond the scroll-scrub itself. The page arrives in the
 *  colour of the sand at the bottom of the last frame, as if the visitor
 *  scrolls on into the beach, and deepens into night on the way down to
 *  the contact form.
 */

:root {
  /* daylight side: used by the nav and the hero over the day-time sky */
  --paper:      #F4F6F7;
  --ink:        #1C2237;
  --red:        #B5373B;

  --dusk:       #222A46;
  --dusk-ink:   #EEF1F5;
  --glow:       #E3A08F;

  /* The page itself, per mode. Sunset (default): the page arrives in the
     sand of the last frame and deepens into night. --page-top is the
     averaged bottom row of that frame, so the page slides in without a seam. */
  --page-top:      #57587B;
  --page-mid:      #34476F;
  --page-bottom:   #222A46;
  --page-ink:      #EEF1F5;
  --page-ink-2:    #C7D0DF;
  --page-rule:     rgba(255, 255, 255, .2);
  --page-band:     rgba(10, 16, 38, .16);
  --page-accent:   #E3A08F;      /* link hover, focus, form messages */
  --field-bg:      #2E3758;
  --field-border:  #414C72;
  --shade:         10, 16, 38;   /* footer shades over the artwork, as rgb */
  --shade-deep:    6, 10, 26;
  --on-accent:     #222A46;
  --card-ink:      #EEF1F5;
  --card-ink-2:    #B4BED0;
  --card-accent:   #E3A08F;
  --deck-card:     #262E4E;

  --font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --section: clamp(80px, 11vw, 144px);

  --hero-bg: #C5DCE6;
}

/* Sunrise: the sequence plays backwards, the page arrives in the sand of
   the first frame and lightens to paper. */
html[data-mode="sunrise"] {
  --page-top:      #F2E7D6;
  --page-mid:      #F5F0E8;
  --page-bottom:   #F4F6F7;
  --page-ink:      #1C2237;
  --page-ink-2:    #5B657A;
  --page-rule:     rgba(28, 34, 55, .18);
  --page-band:     rgba(28, 34, 55, .05);
  --page-accent:   #B5373B;
  --field-bg:      #FFFFFF;
  --field-border:  #C3CED8;
  --shade:         244, 246, 247;
  --shade-deep:    28, 34, 55;
  --on-accent:     #FFFFFF;
  --card-accent:   #E3A08F;
  --hero-bg:       #496998;      /* the stage starts on the dusk frame */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--hero-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--red); }
.hero-end a:hover { color: var(--page-accent); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero-end :focus-visible { outline-color: var(--page-accent); }
.nav[data-theme="dusk"] :focus-visible, .nav[data-theme="dark"] :focus-visible { outline-color: var(--glow); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 30;
  padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 4px;
}
.skip:focus { top: 12px; }

/* ---- controls ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 13px 22px 14px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { color: var(--paper); background: var(--red); }
.btn--light { color: var(--ink); background: var(--paper); }
.btn--light:hover { color: var(--ink); background: var(--glow); }
/* on the light page the form button is the dark one */
html[data-mode="sunrise"] .hero-end .btn--light { color: var(--paper); background: var(--ink); }
html[data-mode="sunrise"] .hero-end .btn--light:hover { background: var(--red); }
.btn[disabled] { opacity: .6; cursor: default; }

.link { font-size: 1.0625rem; }

/* ---- nav ----------------------------------------------------------------- */
/* Fully transparent: only the text colour follows what is behind it — ink
   over the daylight sky, paper once the sun has set and over the night page.
   (The open phone menu is the one exception; it needs a backdrop to be
   readable, see the responsive block.) */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  color: var(--ink);
  transition: color .45s ease, background-color .3s ease;
}
.nav[data-theme="dusk"],
.nav[data-theme="dark"]  { color: var(--dusk-ink); }
.nav[data-theme="light"] { color: var(--ink); }

.nav-brand { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.nav-brand:hover { color: inherit; }

.nav-links { display: flex; gap: 28px; }

/* The sunrise/sunset toggle sits in the bottom-right corner of the viewport.
   It stays inside .nav in the markup so it inherits the nav's theme colour,
   and it is only shown while the hero artwork is on screen. */
.nav-mode {
  position: fixed;
  right: var(--gutter);
  bottom: clamp(16px, 3vh, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, opacity .3s ease;
}
.nav-mode:hover { color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); }
.nav-mode svg { display: block; }
/* only while the artwork is on screen (class set in site.js) */
.nav.is-past-hero .nav-mode { opacity: 0; pointer-events: none; }
.nav-links a { font-size: 1.0625rem; text-decoration: none; }
.nav-links a:hover { color: inherit; text-decoration: underline; text-underline-offset: .22em; }

.nav-toggle {
  display: none;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  color: inherit;
  cursor: pointer;
}

/* ---- the page ------------------------------------------------------------ */
/* One long gradient on <main>: the dusk sky at the top, night at the bottom.
   Sections are transparent so the gradient runs uninterrupted; the "band"
   sections only lay a faint shade over it. (.hero-end itself is positioned
   in hero.css; it must stay opaque.) */
.hero-end {
  background:
    linear-gradient(180deg, var(--page-top) 0%, var(--page-mid) 45%, var(--page-bottom) 100%);
  color: var(--page-ink);
}
/* Paper grain, fading in so the sheet has no hard edge where it meets the art. */
.hero-end::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70vh);
          mask-image: linear-gradient(to bottom, transparent, #000 70vh);
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section--band { background: var(--page-band); }

.section h2 {
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.section h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 500; letter-spacing: -.005em; }

.lead { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; max-width: 36em; }

/* heading left, lead right — the grid every section shares */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.section-head--center {
  display: block;
  text-align: center;
  max-width: 34em;
  margin-inline: auto;
}
.section-head--center h2 { font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 4.2vw, 3.25rem); }
.section-head--center .lead { margin: .7em auto 0; color: var(--page-ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); max-width: 28em; }

.num {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--page-accent); color: var(--on-accent);
  font-size: .75rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* ---- diensten ------------------------------------------------------------ */
/* A sideways rail. carousel.js sets --d per card (0 in the middle, 1 a card
   away) so tilt, size and fade follow the scroll. */
.svc-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: clamp(24px, 3vw, 36px) calc(50% - 50vw) 0; padding-inline: 16px; }
.svc-nav[hidden] { display: none; }
.svc-tabs {
  display: flex; gap: 2px; min-width: 0;
  list-style: none; margin: 0; padding: 4px;
  overflow-x: auto; scrollbar-width: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--page-ink) 8%, transparent);
}
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs button {
  font: inherit; font-size: .875rem; white-space: nowrap;
  padding: .5em .9em; border: 0; border-radius: 999px;
  background: transparent; color: var(--page-ink-2); cursor: pointer;
  transition: background-color .3s, color .3s;
}
.svc-tabs button:hover { color: var(--page-ink); }
.svc-tabs button[aria-current="true"] { background: var(--page-accent); color: var(--on-accent); }
.svc-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--page-ink) 25%, transparent);
  background: transparent; color: var(--page-ink); font-size: 1.125rem; cursor: pointer;
  transition: background-color .2s;
}
.svc-arrow:hover { background: color-mix(in srgb, var(--page-ink) 10%, transparent); }

.services {
  --card-w: min(400px, 78vw);
  display: flex; gap: clamp(12px, 2.5vw, 36px);
  list-style: none; margin: 0;
  padding: clamp(28px, 4vw, 48px) calc(50% - var(--card-w) / 2) clamp(40px, 5vw, 64px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.services::-webkit-scrollbar { display: none; }
.services.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.services.is-dragging .service { cursor: grabbing; }
.service {
  --dd: min(var(--d, 0), 1);
  flex: 0 0 var(--card-w); scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 14px 26px;
  border-radius: 18px;
  background: var(--deck-card);
  color: var(--card-ink);
  box-shadow: 0 30px 60px -30px rgba(var(--shade-deep), .7);
  transform: translateY(calc(var(--dd) * 26px)) rotate(calc(var(--tilt) * var(--dd))) scale(calc(1 - var(--dd) * .1));
  opacity: calc(1 - var(--dd) * .4);
  user-select: none;
}
.services.is-live .service:not(.is-active) { cursor: pointer; }
.service.is-active { box-shadow: 0 40px 80px -30px rgba(var(--shade-deep), .85); }
.service:nth-child(6n+1) { --tilt: -5deg; }
.service:nth-child(6n+2) { --tilt: 4deg; }
.service:nth-child(6n+3) { --tilt: -3deg; }
.service:nth-child(6n+4) { --tilt: 6deg; }
.service:nth-child(6n+5) { --tilt: -4deg; }
.service:nth-child(6n+6) { --tilt: 3deg; }
.service-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 18px; pointer-events: none; }
.service-text { padding-inline: 8px; }
.service .num { background: var(--card-accent); color: #1C2237; margin-bottom: 14px; }
.service h3 { font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1.15; margin-bottom: .4em; }
.service p { color: var(--card-ink-2); font-size: .9375rem; line-height: 1.55; margin-bottom: 1em; }
.service-points { list-style: none; padding: 0; font-size: .875rem; line-height: 1.5; color: var(--card-ink-2); }
.service-points li { display: inline; }
.service-points li + li::before { content: "\00B7"; margin: 0 .45em; color: var(--card-accent); }

/* ---- werk ---------------------------------------------------------------- */
.cases {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
  max-width: 1000px;
  margin-inline: auto;
  list-style: none; padding: 0;
}
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.case:nth-child(even) .case-image { order: 2; }
.case-image {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 24px 48px -28px rgba(var(--shade-deep), .55);
}
.case-text { max-width: 27em; }
.case .num { margin-bottom: 20px; }
.case-kind { color: var(--page-ink-2); font-size: .9375rem; margin-bottom: .7em; }
.case-result {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  line-height: 1.18;
  margin-bottom: .6em;
}
.case-story { font-size: 1.0625rem; }
.case-link { margin-top: 1em; font-size: 1rem; }

/* ---- over ons ------------------------------------------------------------ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 64px;
  align-items: start;
}
.statement {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  letter-spacing: -.008em;
  margin-bottom: .9em;
  text-wrap: pretty;
}
.about-text { max-width: 34em; }

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--page-rule);
}
.person-photo { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 18px; }
.person-role { color: var(--page-ink-2); margin-bottom: .6em; }

.about-facts {
  margin-top: clamp(40px, 5vw, 56px);
  color: var(--page-ink-2);
  font-size: 1rem;
}
.about-facts a { margin-left: .6em; }

/* ---- contact ------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px 96px;
  align-items: start;
}
.contact-intro .lead { color: var(--page-ink-2); margin-top: 1em; }
.contact-mail { margin-top: 1.6em; color: var(--page-ink-2); }

.form { display: grid; gap: 22px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: 8px; }
.field label { font-size: 1rem; color: var(--page-ink-2); }
.field input, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--page-ink);
  background: var(--field-bg);
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: var(--page-ink-2); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--page-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent) 30%, transparent);
}
.field-error { display: none; font-size: .9375rem; color: var(--page-accent); }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: var(--page-accent); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form-status { font-size: .9375rem; color: var(--page-accent); }

.form-success h3 { margin-bottom: .4em; }
.form-success p { color: var(--page-ink-2); }

/* ---- footer -------------------------------------------------------------- */
/* The page is a sheet that slid up over the artwork; at the bottom it slides
   away again. The footer is transparent and a screen high, so the fixed canvas
   (resting on the last frame: dusk, tide in, lamp lit) shows through as the
   sheet lifts. The links sit at the top, right under the sheet's edge, on a
   shade that fades out downward; the copyright line sits at the very bottom
   on a shade that fades upward; between them the picture has the last word.
   The footer lives outside .hero-content (base.html). */
.footer {
  position: relative;
  z-index: 1;                       /* above the canvas, below the page sheet */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--page-ink-2);
  font-size: 1rem;
}
.footer-bar {
  padding: 40px 0 120px;
  background: linear-gradient(to bottom, rgba(var(--shade), .74) 0%, rgba(var(--shade), .5) 55%, transparent 100%);
}
.footer-bottom {
  padding: 72px 0 24px;
  background: linear-gradient(to top, rgba(var(--shade), .6), transparent);
}

/* Brand and tagline on the left, columns of links on the right. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 64px;
  align-items: start;
  padding-block: 8px 40px;
}
.footer-name { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.012em; color: var(--page-ink); }
.footer-tagline { margin-top: .4em; }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 32px clamp(40px, 6vw, 88px);
}
.footer-col h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: .7em;
  color: var(--page-ink);
}
.footer-col li { font-size: 1.0625rem; line-height: 1.5; }
.footer-col li + li { margin-top: .5em; }
.footer-col a { text-decoration: none; color: var(--page-ink); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: .18em; }

.footer-legal { font-size: .9375rem; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 700px) {
  body { font-size: 1.0625rem; }
  .section-head, .about { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .people { grid-template-columns: 1fr; }
  .svc-arrow { display: none; }
  .service-image { aspect-ratio: 16 / 10; }
  .case { grid-template-columns: 1fr; gap: 22px; }
  .case:nth-child(even) .case-image { order: 0; }
  .cases { gap: 56px; }
  .about-facts a { display: block; margin: .3em 0 0; }
  .footer-columns { grid-template-columns: 1fr; gap: 28px; }
  .footer-bar { padding: 28px 0 80px; }

  .nav { flex-wrap: wrap; padding: 14px var(--gutter); }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 14px;
    padding: 16px 0 10px;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .nav.is-open .nav-links { display: flex; }
  /* an open menu needs a near-solid backdrop whatever is behind it */
  .nav.is-open { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav.is-open[data-theme="day"],
  .nav.is-open[data-theme="light"] { background: color-mix(in srgb, var(--paper) 92%, transparent); }
  .nav.is-open[data-theme="dusk"],
  .nav.is-open[data-theme="dark"]  { background: rgba(14, 20, 42, .9); }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .btn, .field input, .field textarea { transition: none; }
}