/*
Theme Name: Visionary ST
Theme URI: https://visionaryst.nl
Author: Visionary ST
Description: Custom theme for Visionary ST, social media bureau in Twente. Signature: a phone/story-card motif (progress dashes, caption chrome, tabular stat numbers) since the product itself is short-form vertical video.
Version: 2.9.5
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: visionary-st
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --ink:        #0B1420;
  --ink-soft:   #55677A;
  --signal:     #155E9E;
  --signal-dim: #0E4370;
  --sky:        #6FC6D9;
  --ember:      #FF6B35;
  --ember-dark: #D9531E;
  --paper:      #F1EEE7;
  --paper-alt:  #E9E4D8;
  --chalk:      #FFFFFF;
  --line:       rgba(11,20,32,0.12);
  --line-soft:  rgba(11,20,32,0.08);

  --display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: 350ms;
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
button{ font: inherit; }
:focus-visible{ outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

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

.wrap{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
section{ position: relative; }
.section-pad{ padding-block: 6.5rem; }
@media (max-width: 700px){ .section-pad{ padding-block: 4.5rem; } }
.site-main{ padding-top: 0; }

.mono-tag, .eyebrow{
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--signal); text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem;
}
.mono-tag::before, .eyebrow::before{ content: "//"; color: var(--ember); }

h1,h2,h3{ font-family: var(--display); margin: 0; letter-spacing: -0.01em; }
.section-title{ font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem); font-weight: 700; line-height: 1.02; margin-top: 0.75rem; }
.section-lead{ font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem); color: var(--ink-soft); max-width: 46ch; margin-top: 0.75rem; }
.section-head{ display: flex; flex-direction: column; margin-bottom: 3.5rem; max-width: 640px; }
.section-head.center{ margin-inline: auto; align-items: center; text-align: center; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-primary{ background: var(--ember); color: var(--chalk); box-shadow: 0 10px 24px -10px rgba(255,107,53,0.6); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(255,107,53,0.7); background: var(--ember-dark); }
.btn-ghost{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--chalk); }
.btn-ghost.on-dark{ border-color: rgba(255,255,255,0.35); color: #fff; }
.btn-ghost.on-dark:hover{ background: #fff; color: var(--ink); }
.btn-small{ padding: 0.7rem 1.2rem; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header{ position: fixed; inset-inline: 0; top: 0; z-index: 100; padding-block: 1.1rem;
  background: rgba(241,238,231,0.9); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 1px 0 var(--line);
  transition: padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between; }
.site-header.is-scrolled{ padding-block: 0.7rem; box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(11,20,32,0.15); }
.brand-logo{ height: 28px; width: auto; }
.custom-logo-link img{ height: 28px; width: auto; }
.nav-links{ display: flex; align-items: center; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a{ font-size: 0.92rem; font-weight: 600; text-decoration: none; position: relative; }
.nav-links a::after{ content:""; position: absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--ember); transition: right var(--dur) var(--ease); }
.nav-links a:hover::after{ right: 0; }
.nav-toggle{ display: none; background:none; border:none; padding:8px; color: var(--ink); }
@media (max-width: 880px){
  .nav-links{ position: fixed; inset: 0 0 auto 0; top:0; flex-direction: column; align-items: flex-start;
    background: var(--ink); padding: 6.5rem 1.5rem 2rem; gap: 1.1rem;
    transform: translateY(-105%); transition: transform var(--dur) var(--ease); }
  .nav-links.is-open{ transform: translateY(0); }
  .nav-links a{ color: #fff; font-size: 1.15rem; }
  .nav-cta{ display: none; }
  .nav-toggle{ display: inline-flex; z-index: 101; }
}
@media (min-width: 881px){ .nav-toggle{ display: none; } }

/* ---------- Hero ---------- */
.hero{ padding-top: clamp(7.5rem, 6vw + 5rem, 9.5rem); padding-bottom: 5rem; overflow: clip; }
.hero-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; }
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-title{ margin-top: 1rem; font-size: clamp(2.6rem, 4vw + 1.2rem, 5rem); font-weight: 700; line-height: 0.98; }
.hero-title .line{ display: block; }
.hero-title .accent{ color: var(--ember); }
.hero-lead{ margin-top: 1.5rem; font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem); color: var(--ink-soft); max-width: 46ch; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero-proof{ display: flex; gap: 2.5rem; margin-top: 3.5rem; flex-wrap: wrap; }
.proof-item .num{ font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--ink); display:block; }
.proof-item .label{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }

/* ---- signature: phone/story card ---- */
.phone{ position: relative; width: min(300px, 82vw); aspect-ratio: 9/16; margin-inline: auto;
  border-radius: 34px; background: var(--ink); padding: 10px; box-shadow: 0 40px 80px -30px rgba(11,20,32,0.45); }
.phone-screen{ position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #000; }
.phone-screen img, .phone-screen video, .phone-screen iframe{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; border: 0; }
.phone-screen img.is-active, .phone-screen video.is-active, .phone-screen iframe.is-active{ opacity: 1; }
.phone-dashes{ position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 5px; z-index: 3; }
.phone-dash{ flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.35); overflow: hidden; }
.phone-dash i{ display: block; height: 100%; width: 0%; background: #fff; }
.phone-dash.is-done i{ width: 100%; transition: none; }
.phone-dash.is-active i{ width: 0%; animation: dashfill 3.4s linear forwards; }
@keyframes dashfill{ to{ width: 100%; } }
.phone-head{ position: absolute; top: 26px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.phone-sound-toggle{
  margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-sound-toggle .icon-on{ display: none; }
.phone-sound-toggle:not(.is-muted) .icon-off{ display: none; }
.phone-sound-toggle:not(.is-muted) .icon-on{ display: block; }
.phone-head img{ width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; }
.phone-head span{ color: #fff; font-size: 0.8rem; font-weight: 700; }
.phone-caption{ position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 3; color: #fff; }
.phone-caption p{ margin: 0 0 8px; font-size: 0.85rem; line-height: 1.4; }
.phone-stats{ display: flex; gap: 14px; font-family: var(--mono); font-size: 0.72rem; }
.phone-stats span{ display: flex; align-items: center; gap: 4px; }
.phone-scrim{ position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); z-index: 2; }

/* ---------- Explainer video slot ---------- */

/* ---------- Marquee ---------- */
.marquee-section{ border-block: 1px solid var(--line); padding-block: 1.75rem; }
.marquee-label{ text-align:center; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.marquee{ overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display: flex; width: max-content; gap: 3rem; animation: marquee 30s linear infinite; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
.marquee-item{ font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); opacity: 0.55; white-space: nowrap; }
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* ---------- Diensten ---------- */
.services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px){ .services-grid{ grid-template-columns: 1fr; } }
.service-card{ background: var(--chalk); border-radius: var(--r-l); padding: 2.5rem 2rem; border: 1px solid var(--line-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11,20,32,0.25); }
.service-card .idx{ font-family: var(--mono); color: var(--ember); font-weight: 700; font-size: 0.85rem; }
.service-card h3{ margin-top: 1.5rem; font-size: 1.4rem; font-weight: 700; }
.service-card p{ margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Zo werken wij (4-step tabs) ---------- */
.steps-tabs{ display: flex; gap: 0.75rem; margin-bottom: 0; flex-wrap: wrap; }
.step-tab{
  flex: 1; min-width: 140px; background: var(--chalk); border: 1.5px solid var(--line); border-radius: var(--r-m) var(--r-m) 0 0;
  padding: 1.3rem 1.5rem; text-align: left; cursor: pointer; transition: background var(--dur), border-color var(--dur);
}
.step-tab .n{ font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); display: block; }
.step-tab .t{ font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-top: 4px; display: block; color: var(--ink); transition: color var(--dur); }
.step-tab:hover{ border-color: var(--signal); }
.step-tab.is-active{ background: var(--ink); border-color: var(--ink); }
.step-tab.is-active .n{ color: var(--ember); }
.step-tab.is-active .t{ color: #fff; }
.step-pane{ display: none; }
.step-pane.is-active{
  display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem;
  background: var(--chalk); border-radius: 0 var(--r-l) var(--r-l) var(--r-l); padding: 2.5rem;
}
@media (max-width: 700px){ .step-pane.is-active{ grid-template-columns: 1fr; } .step-tab{ min-width: 45%; } }
.step-pane ul{ margin: 1.5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.step-pane h3{ font-size: 1.5rem; font-weight: 700; }
.step-pane .body-text{ margin-top: 0.75rem; color: var(--ink-soft); }
.step-result{ background: var(--paper); border-radius: var(--r-s); padding: 1rem 1.25rem; margin-top: 1.25rem; font-size: 0.92rem; }

/* ---------- Portfolio tray (signature reused) ---------- */
.tray-filters{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.tray-filter{ background: var(--chalk); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.25rem;
  font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur); }
.tray-filter.is-active{ background: var(--ink); color: #fff; border-color: var(--ink); }
.tray{ display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.tray::-webkit-scrollbar{ display: none; }
.tray-card{ flex: 0 0 auto; width: 220px; aspect-ratio: 9/16; border-radius: var(--r-m); position: relative; overflow: hidden;
  scroll-snap-align: start; background: var(--ink); text-decoration:none; color:#fff; display:block; }
.tray-card.is-hidden{ display: none; }
.tray-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tray-card:hover img{ transform: scale(1.06); }
.tray-card .scrim{ position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent); transition: height var(--dur) var(--ease); }
.tray-card .info{ position: absolute; left: 14px; right: 14px; bottom: 14px; }
.tray-card .info b{ display:block; font-size: 0.95rem; font-weight: 700; }
.tray-card .info span{ font-family: var(--mono); font-size: 0.7rem; color: var(--sky); text-transform: uppercase; }
.tray-card .results{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem;
  background: rgba(11,20,32,0.88); opacity:0; transition: opacity var(--dur) var(--ease); text-align:center; padding: 1rem; }
.tray-card:hover .results{ opacity: 1; }
.tray-card .results .stat b{ display:block; font-family: var(--mono); font-size:1.5rem; color: var(--ember); }
.tray-card .results .stat span{ font-size:0.72rem; color: rgba(255,255,255,0.75); }
.tray-hint{ display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }
.tray-more{ text-align: center; margin-top: 3rem; }

/* ---------- Clients archive page (grid, not tray) ---------- */
.clients-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 940px){ .clients-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .clients-grid{ grid-template-columns: 1fr; } }
.client-card{ position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/5; display:block; text-decoration:none; color:#fff; background: var(--ink); }
.client-card img{ width:100%; height:100%; object-fit:cover; transition: transform 700ms var(--ease); }
.client-card:hover img{ transform: scale(1.06); }
.client-card .scrim{ position:absolute; inset:auto 0 0 0; height:65%; background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent); }
.client-card .body{ position:absolute; left:20px; right:20px; bottom:20px; }
.client-card .tags{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.client-card .tags span{ font-family: var(--mono); font-size:0.68rem; text-transform:uppercase; background: rgba(255,255,255,0.16); padding:4px 9px; border-radius:999px; }
.client-card b{ display:block; font-family: var(--display); font-size:1.3rem; font-weight:700; }
.client-card .cta{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color: var(--sky); margin-top:8px; }

/* ---------- CTA band ---------- */
.cta-band{ position: relative; background: var(--ink); color: #fff; text-align: center; overflow: hidden; }
.cta-band::before, .cta-band::after{ content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.cta-band::before{ width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,107,53,0.25), transparent 70%); top: -200px; left: -140px; }
.cta-band::after{ width: 400px; height: 400px; background: radial-gradient(circle, rgba(111,198,217,0.18), transparent 70%); bottom: -180px; right: -110px; }
.cta-band .wrap{ position: relative; z-index: 1; }
.cta-band .eyebrow{ color: var(--ember); }
.cta-band .section-title{ max-width: 20ch; margin-inline: auto; color: #fff; }
.cta-band .section-lead{ color: rgba(255,255,255,0.68); margin-inline: auto; }
.cta-band .btn-primary{ margin-top: 2.5rem; }
.cta-band .wp-block-buttons{ justify-content: center; }
.grow-highlights{ display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 2.5rem; }
.grow-chip{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); padding: 0.65rem 1.2rem; border-radius: 999px; font-size: 0.85rem; margin: 0; }
.grow-chip b{ color: var(--ember); font-family: var(--mono); }

/* ---------- Packages ---------- */
.packages-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 940px){ .packages-grid{ grid-template-columns: 1fr; } }
.package-card{ background: var(--chalk); border: 1px solid var(--line-soft); border-radius: var(--r-l); padding: 2.25rem; display:flex; flex-direction:column; }
.package-card.is-featured{ background: var(--ink); color: #fff; border-color: var(--ink); }
.package-card .p-tag{ font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; color: var(--ember); }
.package-card h3{ margin-top: 0.75rem; font-size: 1.5rem; }
.package-card .price{ font-family: var(--mono); font-size: 1.6rem; font-weight: 700; margin-top: 0.5rem; }
.package-card .price span{ font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
.package-card ul{ list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.package-card li{ font-size: 0.92rem; padding-left: 1.4rem; position: relative; }
.package-card li::before{ content: "✓"; position: absolute; left: 0; color: var(--ember); font-weight: 700; }
.package-card .btn{ margin-top: auto; width: 100%; justify-content: center; }

/* ---- Organisch pakket: flip-in-place quote form ---- */
.package-card.has-flip{ position: relative; perspective: 1600px; overflow: hidden; }
.package-card.has-flip .card-flipper{
  position: relative; flex: 1; display: flex; flex-direction: column;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d;
}
.package-card.has-flip.is-flipped .card-flipper{ transform: rotateY(180deg); }
.package-card.has-flip .card-face{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.package-card.has-flip .card-front{ display: flex; flex-direction: column; flex: 1; }
.package-card.has-flip .card-back{
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column; overflow-y: auto;
}
.package-card.has-flip .card-back h3{ margin-top: 0; font-size: 1.3rem; }
.package-card.has-flip .card-back-close{
  align-self: flex-start; background: none; border: none; padding: 0; margin-bottom: 1rem;
  font-weight: 700; font-size: 0.85rem; cursor: pointer; color: var(--ink-soft);
}
.package-card.has-flip .card-back-close:hover{ color: var(--ink); }
.package-card.has-flip .card-back .contact-form-wrap{ background: none; border: none; padding: 0; margin-top: 0.5rem; }
.package-card.has-flip .card-back input[type=submit]{ width: 100%; }

/* ---------- Lead magnets ---------- */
.magnets-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin-inline: auto; }
@media (max-width: 760px){ .magnets-grid{ grid-template-columns: 1fr; } }
.magnet-card{ position: relative; overflow: hidden; background: var(--chalk); border-radius: var(--r-l); padding: 2.25rem; border: 1px solid var(--line-soft); }
.magnet-card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ember), var(--sky)); }
.magnet-card .m-tag{ display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.75rem; color: var(--signal); text-transform: uppercase; background: var(--paper-alt); padding: 0.35rem 0.85rem; border-radius: 999px; }
.magnet-card h3{ margin-top: 1.1rem; font-size: 1.3rem; }
.magnet-card p{ color: var(--ink-soft); margin-top: 0.6rem; font-size: 0.95rem; }
.magnet-form{ display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.magnet-form .wpcf7-form-control-wrap{ width: 100%; }
.magnet-form input[type=text], .magnet-form input[type=email]{ width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0.85rem 1rem; font: inherit; background: var(--paper); }
.magnet-form input[type=submit]{ width: 100%; background: var(--ember); color: #fff; border: none; border-radius: 999px; padding: 0.9rem 1.4rem; font-weight: 700; cursor: pointer; transition: background var(--dur); }
.magnet-form input[type=submit]:hover{ background: var(--ember-dark); }
.magnet-form .wpcf7-response-output{ width: 100%; margin-top: 0.75rem !important; border-radius: var(--r-s); font-size: 0.85rem; }
.magnet-download-link{
  display: inline-flex; margin-top: 1rem; font-size: 0.88rem; font-weight: 700;
  color: var(--signal); text-decoration: none;
}
.magnet-download-link:hover{ text-decoration: underline; }

/* ---------- Team ---------- */
.team-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px){ .team-wrap{ grid-template-columns: 1fr; } }
.team-photo img{ width: 100%; }
.founders{ display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.founder-chip{ background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem 0.5rem 0.5rem; display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.88rem; }
.founder-chip .dot{ width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #fff; display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: 0.75rem; }
.mission-vision{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 700px){ .mission-vision{ grid-template-columns: 1fr; } }
.fact-card{ background: var(--paper); border-radius: var(--r-m); padding: 1.5rem; }
.fact-card h3{ font-size: 1.05rem; font-weight: 800; margin: 0 0 0.4rem; }
.fact-card p{ color: var(--ink-soft); margin: 0; font-size: 0.92rem; }

/* ---------- Reviews (DM bubble) ---------- */
.reviews-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 800px){ .reviews-grid{ grid-template-columns: 1fr; } }
.review-bubble{ background: var(--chalk); border-radius: var(--r-l); border: 1px solid var(--line-soft); padding: 2rem; }
.review-stars{ color: var(--ember); font-size: 0.9rem; letter-spacing: 2px; }
.review-bubble p{ margin: 1rem 0 0; font-size: 1.02rem; }
.review-who{ display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.review-avatar{ width: 40px; height: 40px; border-radius: 50%; background: var(--signal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--mono); font-size: 0.8rem; flex-shrink: 0; }
img.review-avatar{ object-fit: cover; }
.review-who b{ display:block; font-size: 0.92rem; }
.review-who span{ font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Blog teaser ---------- */
.blog-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 760px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ background: var(--chalk); border: 1px solid var(--line-soft); border-radius: var(--r-l); padding: 2rem; text-decoration: none; display: block; color: var(--ink);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.blog-card:hover{ box-shadow: 0 24px 48px -28px rgba(11,20,32,0.25); transform: translateY(-4px); }
.blog-card .tag{ display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--signal); background: var(--paper); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.blog-card h3{ margin: 0.75rem 0 0; font-size: 1.3rem; font-weight: 700; }
.blog-card p{ margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.wp-block-details{ border: none; border-bottom: 1px solid var(--line); padding-block: 1rem; max-width: 780px; margin-inline: auto; }
.wp-block-details summary{ font-family: var(--display); font-size: 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.wp-block-details summary::-webkit-details-marker{ display: none; }
.wp-block-details summary::before{ content: "+"; display: inline-block; margin-right: 0.75rem; color: var(--ember); font-weight: 800; }
.wp-block-details[open] summary::before{ content: "\2212"; }
.wp-block-details p{ color: var(--ink-soft); margin-top: 0.75rem; }

/* ---------- Contact ---------- */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-photo{ margin: 2rem 0 0; border-radius: var(--r-l); overflow: hidden; }
.contact-photo img{ width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.info-row{ display:flex; gap:1rem; align-items:flex-start; margin-bottom: 1.4rem; }
.info-row .icon{ width:42px; height:42px; border-radius: var(--r-s); background: var(--chalk); border:1px solid var(--line-soft); flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--signal); }
.info-row b{ display:block; font-size:0.95rem; }
.info-row span{ color: var(--ink-soft); font-size:0.9rem; }
.contact-form-wrap{ background: var(--chalk); border: 1px solid var(--line-soft); border-radius: var(--r-l); padding: 2.2rem; }
.wpcf7-form p{ margin-bottom: 1.1rem; }
.wpcf7-form label{ font-size:0.85rem; font-weight:700; display:block; margin-bottom:6px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea{
  width:100%; border:1px solid var(--line); border-radius: var(--r-s); padding:0.85rem 1rem; font:inherit; background: var(--paper); }
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ outline:none; border-color: var(--signal); background:#fff; }
.wpcf7-form input[type=submit]{ background: var(--ember); color:#fff; border:none; border-radius:999px; padding:1rem 1.6rem; font-weight:700; cursor:pointer; width: 100%; }
.wpcf7-form input[type=submit]:hover{ background: var(--ember-dark); }
.wpcf7-not-valid-tip{ color:#c0392b; font-size:0.8rem; margin-top:4px; }
.wpcf7-response-output{ border-radius: var(--r-s); margin-top:1rem !important; font-size:0.9rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.65); padding-top: 4.5rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand p{ margin-top: 1rem; max-width: 30ch; font-size: 0.9rem; }
.footer-col h4{ color:#fff; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.9rem; text-decoration:none; transition: color var(--dur); }
.footer-col a:hover{ color:#fff; }
.footer-badges{ display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.footer-brand .footer-badges{ margin-top: 1.5rem; }
.footer-badge{ display:inline-flex; align-items:center; }
.footer-badge img{ height:52px; width:auto; display:block; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:1.4rem; font-size:0.8rem; flex-wrap:wrap; gap:0.75rem; }
.footer-social{ display:flex; gap:0.75rem; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition: background var(--dur); }
.footer-social a:hover{ background: var(--ember); }

/* ---------- Cookie banner ---------- */
.cookie-banner{ position: fixed; left:1.5rem; right:1.5rem; bottom:1.5rem; max-width: 460px;
  background: var(--chalk); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.5rem;
  box-shadow: 0 30px 60px -20px rgba(11,20,32,0.35); z-index: 200; transform: translateY(140%); transition: transform var(--dur) var(--ease); }
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: 0.87rem; color: var(--ink-soft); margin:0; }
.cookie-actions{ display:flex; gap:0.75rem; margin-top:1rem; }
.cookie-actions .btn{ padding: 0.6rem 1.2rem; font-size: 0.85rem; }

/* ---------- Case study page ---------- */
.case-hero{ background: var(--ink); color: #fff; padding-block: clamp(8rem, 6vw + 5rem, 10rem) 4rem; }
.case-hero .tags{ display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
.case-hero .tags span{ font-family: var(--mono); font-size:0.72rem; text-transform:uppercase; background: rgba(255,255,255,0.12); padding:5px 11px; border-radius:999px; }
.case-hero h1{ font-size: clamp(2.4rem, 3vw + 1rem, 4rem); font-weight: 700; }
.case-hero p{ color: rgba(255,255,255,0.7); margin-top: 1rem; max-width: 60ch; font-size: 1.1rem; }
.case-cover{ margin-top: 2.5rem; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 21/9; }
.case-cover img, .case-cover video, .case-cover iframe{ width: 100%; height: 100%; object-fit: cover; border: 0; }
.case-section{ max-width: 820px; margin-inline: auto; padding-block: 4rem; border-bottom: 1px solid var(--line); }
.case-section:last-of-type{ border-bottom: none; }
.case-section .mono-tag{ margin-bottom: 1rem; }
.case-section h2{ font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem); font-weight: 700; }
.case-section .body-copy{ margin-top: 1.25rem; color: var(--ink-soft); font-size: 1.05rem; }
.case-section.result{ background: var(--chalk); border-radius: var(--r-l); padding: 3rem; border-bottom: none; }
.case-result-stats{ display:flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.case-result-stats .stat b{ display:block; font-family: var(--mono); font-size: 2.4rem; font-weight: 700; color: var(--signal); }
.case-result-stats .stat span{ font-size: 0.85rem; color: var(--ink-soft); }
/* flexible video block layouts, applied via block "additional CSS class" */
.video-16-9{ aspect-ratio: 16/9; border-radius: var(--r-l); overflow: hidden; margin-top: 1.5rem; }
.video-16-9 iframe, .video-16-9 video{ width:100%; height:100%; object-fit:cover; }
.video-trio{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 700px){ .video-trio{ grid-template-columns: 1fr; } }
.video-trio > *{ aspect-ratio: 9/16; border-radius: var(--r-m); overflow: hidden; }
.video-trio iframe, .video-trio video{ width:100%; height:100%; object-fit:cover; }
/* Instagram's own embed widget: it manages its own internal iframe sizing, so we
   can't force-crop it like a real <video>/<iframe> — just reset its default
   margins/min-width so it at least fills the container width. */
.case-cover .instagram-media, .video-16-9 .instagram-media, .video-trio .instagram-media{
  width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important;
}
.case-result-highlight{ position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--r-l); padding: 3rem clamp(1.5rem, 3vw, 3.5rem); margin: 1rem auto 0; max-width: 820px; text-align: center; }
.case-result-highlight::before{ content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,53,0.28), transparent 70%); top: -140px; right: -100px; pointer-events: none; }
.case-result-highlight .eyebrow{ position: relative; z-index: 1; color: var(--sky); }
.highlight-stats{ position: relative; z-index: 1; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 1.5rem; }
.highlight-stats .stat b{ display: block; font-family: var(--mono); font-size: clamp(2.2rem, 2vw + 1.6rem, 3.2rem); font-weight: 700; color: #fff; }
.highlight-stats .stat span{ font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.case-cta{ text-align:center; margin-top: 3rem; }

[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }
.skip-link{ position:absolute; left:-999px; top:0; background: var(--ember); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; z-index:999; }
.skip-link:focus{ left:0; }