/* ============================================================
   STUDIOAGENTIC — DESIGN TOKENS
   ============================================================ */
:root{
  /* colour */
  --bg:        #F6F3EC;   /* warm off-white ground            */
  --bg-deep:   #EFE9DD;   /* deeper cream for alternate bands */
  --ink:       #191712;   /* near-black text                  */
  --muted:     #6E6959;   /* secondary text                   */
  --line:      #D9D3C4;   /* hairline rules                   */
  --accent:    #3E5138;   /* deep olive — functional accent   */
  --surf-sage: #DCE0CF;   /* placeholder surface 1            */
  --surf-sand: #E7DCC6;   /* placeholder surface 2            */
  --surf-slate:#D6DBDD;   /* placeholder surface 3            */

  /* type */
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Spline Sans Mono", "SF Mono", monospace;

  /* scale */
  --step-hero: clamp(2.75rem, 7.6vw, 6.4rem);
  --step-h2:   clamp(2rem, 4.4vw, 3.6rem);
  --step-h3:   clamp(1.35rem, 2.2vw, 1.8rem);
  --step-body: 1.0625rem;
  --step-meta: 0.72rem;

  /* rhythm */
  --space-section: clamp(5.5rem, 11vw, 10.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 2px;
  --ease: cubic-bezier(.25,.6,.2,1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background:var(--accent); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.wrap{
  width:min(1240px, 100% - 2*var(--gutter));
  margin-inline:auto;
}

/* shared type roles ------------------------------------------------ */
.meta{
  font-family:var(--mono);
  font-size:var(--step-meta);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.serif-h{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.015em;
  font-optical-sizing:auto;
}

.lede{
  color:var(--muted);
  max-width:44ch;
}

em.tone{
  font-style:italic;
  font-weight:340;
}

/* section header pattern ------------------------------------------- */
.section{ padding-block:var(--space-section); }
.section--tight{ padding-top:0; }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem, 5vw, 4.5rem);
}

/* underline-slide link --------------------------------------------- */
.u-link{
  position:relative;
  padding-bottom:2px;
}
.u-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.u-link:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  padding:.85rem 1.6rem;
  border:1px solid var(--ink);
  border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }

/* reveal on scroll ------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   01 — NAVIGATION
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--line); }

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1.1rem;
}

.wordmark{
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:-0.01em;
}
.wordmark em{ font-style:italic; font-weight:340; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav-links a:not(.btn){
  font-size:.92rem;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.nav-links a:not(.btn):hover{ color:var(--ink); }

.nav-toggle{ display:none; }

/* ============================================================
   02 — HERO
   ============================================================ */
.hero{
  padding-block:clamp(4.5rem, 10vw, 8.5rem) var(--space-section);
}
.hero--compact{
  padding-block:clamp(4.5rem, 10vw, 8.5rem) clamp(2rem, 4vw, 3rem);
}

.hero-meta{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.hero-meta .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
}

.hero h1{
  font-size:var(--step-hero);
  max-width:15ch;
  margin-bottom:clamp(2rem, 4vw, 3rem);
  text-wrap:balance;
}

.hero-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
}
.hero-foot .lede{ font-size:1.125rem; }

.hero-ctas{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-shrink:0;
}
.hero-ctas .u-link{ font-size:.95rem; color:var(--muted); }
.hero-ctas .u-link:hover{ color:var(--ink); }

/* ============================================================
   03 — SELECTED WORK
   ============================================================ */
.work{ background:var(--bg); }

.project{ margin-bottom:clamp(3rem, 7vw, 6rem); }
.project:last-of-type{ margin-bottom:0; }

.frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
/* curtain reveal */
.frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg);
  transform:scaleY(1);
  transform-origin:top;
  transition:transform 1s var(--ease) .15s;
}
.frame.in::after{ transform:scaleY(0); }
@media (prefers-reduced-motion: reduce){
  .frame::after{ display:none; }
}

.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  transition:transform 1.2s var(--ease);
}
.frame:hover .ph{ transform:scale(1.025); }

.ph-mark{
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(3rem, 8vw, 6rem);
  color:var(--ink);
  opacity:.28;
}

.ph-wide{ aspect-ratio:16/8.5; background:var(--surf-sage); }
.ph-tall{ aspect-ratio:4/4.6;  background:var(--surf-sand); }
.ph-mid{  aspect-ratio:4/3.2;  background:var(--surf-slate); }

.project-cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:.9rem;
}
.project-cap h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--step-h3);
  letter-spacing:-0.01em;
}

.work-pair{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:start;
}
.work-pair .project:nth-child(2){
  margin-top:clamp(3rem, 8vw, 7rem); /* asymmetric offset */
}

.work-note{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  color:var(--muted);
  font-size:.95rem;
  max-width:52ch;
}

/* --- edge-to-edge auto-scrolling work slider ---------------------- */
.work-marquee{
  overflow:hidden;
  width:100%;
  margin-block:clamp(2.5rem, 5vw, 4.5rem) 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.work-track{
  display:flex;
  width:max-content;
  gap:clamp(1.25rem, 3vw, 2.5rem);
  padding-inline:var(--gutter);
  animation:workScroll 32s linear infinite;
}
.work-marquee:hover .work-track{ animation-play-state:paused; }

@keyframes workScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.wm-tile{ display:block; flex:0 0 auto; width:min(380px, 74vw); }
.wm-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3.1;
  border-radius:var(--radius);
}
.wm-sage{ background:var(--surf-sage); }
.wm-sand{ background:var(--surf-sand); }
.wm-slate{ background:var(--surf-slate); }

.wm-photo{ overflow:hidden; }
.wm-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* live-site preview: scale an iframe down so the real page renders as a thumbnail */
.wm-frame{ overflow:hidden; position:relative; pointer-events:none; }
.wm-frame iframe{
  position:absolute;
  top:0; left:0;
  width:400%;
  height:400%;
  border:0;
  transform:scale(.25);
  transform-origin:top left;
}

.wm-cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:.9rem;
}
.wm-cap h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--step-h3);
  letter-spacing:-0.01em;
}

@media (prefers-reduced-motion: reduce){
  .work-track{ animation:none; }
}

/* ============================================================
   WHAT WE DO  (exact recreation — coloured card grid)
   ============================================================ */
.services{ background:var(--bg-deep); }

.services-title{
  font-family:var(--sans);
  font-weight:650;
  font-size:clamp(2.3rem, 5vw, 3.35rem);
  letter-spacing:-0.025em;
  line-height:1.08;
  color:var(--ink);
  margin-bottom:clamp(2.2rem, 4.5vw, 3.6rem);
}

.svc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem, 2.6vw, 2rem);
}

.svc-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:clamp(280px, 32vw, 335px);
  border-radius:14px;
  padding:1.7rem 2rem 2.4rem;
}

.svc-card.c-white{ background:#FFFFFF; }
.svc-card.c-blue{  background:#BCD6F8; }
.svc-card.c-green{ background:#A2EBC6; }
.svc-card.c-pink{  background:#FBC8C6; }

.svc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.svc-top .svc-label{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  color:var(--ink);
}
.svc-top svg{
  width:44px;
  height:44px;
  flex-shrink:0;
}

.svc-card p{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--ink);
  max-width:22em;
  padding-left:.75rem;
}

.svc-cta{
  display:flex;
  justify-content:center;
  margin-top:clamp(2.8rem, 5vw, 4.2rem);
}
.svc-cta .btn-faq{
  display:inline-block;
  background:#1B1B1B;
  color:#FFFFFF;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:500;
  padding:.95rem 1.7rem;
  border-radius:999px;
  transition:background .3s var(--ease);
}
.svc-cta .btn-faq:hover{ background:var(--accent); }

/* ============================================================
   WHY WORK WITH US  (exact recreation + Framer-style motion)
   ============================================================ */
.why2{ background:#FFFFFF; }

/* Framer-style entrance: fade + rise + blur */
.fx{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1),
             filter .9s cubic-bezier(.22,1,.36,1);
}
.fx.in{ opacity:1; transform:none; filter:none; }
.fx.fd1{ transition-delay:.1s; }
.fx.fd2{ transition-delay:.2s; }
.fx.fd3{ transition-delay:.3s; }
@media (prefers-reduced-motion: reduce){
  .fx{ opacity:1; transform:none; filter:none; transition:none; }
}

.ww-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.ww-card{
  background:#F4F4F2;
  border-radius:22px;
  padding:2.6rem 2.4rem 2.5rem;
  text-align:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.ww-card:hover{ transform:translateY(-4px); }

.ww-visual{
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2.2rem;
}

.ww-card h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:-0.01em;
  color:#1B1B1B;
  padding-bottom:.9rem;
  margin-bottom:.9rem;
  border-bottom:1px solid #E4E3DF;
  display:inline-block;
  min-width:60%;
}
.ww-card > p{
  font-size:.9rem;
  line-height:1.6;
  color:#5F5F5F;
  max-width:42ch;
  margin-inline:auto;
}

/* --- card 1: price bars --------------------------------------- */
.ww-bars{ gap:1rem; align-items:flex-end; padding-bottom:.5rem; }
.bar-col{
  position:relative;
  width:76px;
  height:250px;
  background:#FFFFFF;
  border:1px solid #ECEBE8;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.bar{
  width:100%;
  height:var(--h);
  border-radius:8px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:.6rem;
  font-family:var(--mono);
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#FFFFFF;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.ww-card.in .bar{ transform:scaleY(1); }
.ww-card.in .bar-col:nth-child(2) .bar{ transition-delay:.15s; }
.ww-card.in .bar-col:nth-child(3) .bar{ transition-delay:.3s; }
.b-dark{ background:#1a1a1a; }
.b-blue{ background:#a4f4cf; }
.bar-price{
  position:absolute;
  left:0; right:0;
  bottom:calc(var(--h) + 10px);
  font-size:.72rem;
  font-weight:600;
  color:#1B1B1B;
  opacity:0;
  transition:opacity .6s var(--ease) .8s;
}
.ww-card.in .bar-price{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .bar{ transform:scaleY(1); transition:none; }
  .bar-price{ opacity:1; transition:none; }
}

/* --- card 2: Framer browser ----------------------------------- */
.ww-framer{ flex-direction:column; gap:1.1rem; }
.fr-pill{
  font-size:.72rem;
  color:#3A3A3A;
  background:#FFFFFF;
  border:1px solid #E7E6E2;
  border-radius:999px;
  padding:.35rem .8rem;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.fr-browser{
  position:relative;
  width:min(340px, 100%);
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
  padding:.9rem 1rem 1rem;
}
.fr-dots{ display:flex; gap:5px; margin-bottom:.8rem; }
.fr-dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:#E2E2E2;
}
.fr-cols{ display:flex; gap:.9rem; }
.fr-hero-blk{
  flex:1.1;
  height:130px;
  border-radius:10px;
  background:linear-gradient(150deg, #C8E6FF 0%, #8CC4F5 100%);
}
.fr-lines{ flex:1; display:flex; flex-direction:column; gap:.7rem; padding-top:.3rem; }
.fr-lines span{
  height:14px;
  border-radius:7px;
  background:#f8f8f2;
}
.fr-lines span:nth-child(2){ width:85%; }
.fr-lines span:nth-child(3){ width:60%; }
.fr-lines span:nth-child(4){ width:92%; }
.fr-tile{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:64px; height:64px;
  background:#FFFFFF;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:tileFloat 3.4s ease-in-out infinite;
}
@keyframes tileFloat{
  0%,100%{ transform:translate(-50%,-52%); }
  50%    { transform:translate(-50%,-46%); }
}
@media (prefers-reduced-motion: reduce){
  .fr-tile{ animation:none; }
}

/* --- card 3: publish donut ------------------------------------ */
.fr-panel{
  width:min(340px, 100%);
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
  padding:1.2rem 1.3rem 1.4rem;
}
.fr-panel-top{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.fr-panel-top .l{ color:#1B1B1B; }
.fr-panel-top .r{ color:#A16207; }
.donut{
  --p:80;
  position:relative;
  width:150px; height:150px;
  margin-inline:auto;
  border-radius:50%;
  background:conic-gradient(#a4f4cf calc(var(--p) * 1%), #F0F0EE 0);
}
.donut::before{
  content:"";
  position:absolute;
  inset:26px;
  border-radius:50%;
  background:#FFFFFF;
}
.donut .pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.86rem;
  color:#8A8A8A;
}
.fr-status{
  margin-top:1.4rem;
  text-align:center;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#7C8DA0;
  min-height:1.2em;
}
.fr-status.done{ color:#2FA36B; }

/* --- card 4: stripe notifications ----------------------------- */
.ww-notifs{ flex-direction:column; justify-content:center; }
.notif-stack{
  width:min(360px, 100%);
  display:flex;
  flex-direction:column;
}
.notif{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  background:#FFFFFF;
  border-radius:13px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  padding:.85rem 1rem;
  text-align:left;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s cubic-bezier(.22,1,.36,1);
}
.notif + .notif{ margin-top:.65rem; }
.notif:nth-child(2){ margin-inline:.6rem; margin-top:-.55rem; z-index:-1; }
.notif:nth-child(2){ box-shadow:0 6px 16px rgba(0,0,0,.06); }
.notif.enter{ opacity:0; transform:translateY(-16px) scale(.97); }
.notif-icon{
  width:40px; height:40px;
  flex-shrink:0;
  border-radius:10px;
  background:#635BFF;
  display:flex;
  align-items:center;
  justify-content:center;
}
.notif-icon svg{ width:20px; height:20px; }
.notif-body{ flex:1; min-width:0; }
.notif-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem;
}
.notif-head strong{
  font-size:.86rem;
  font-weight:600;
  color:#1B1B1B;
}
.notif-head time{
  font-size:.7rem;
  color:#9A9A9A;
  white-space:nowrap;
}
.notif-body p{
  font-size:.8rem;
  line-height:1.45;
  color:#6B6B6B;
  margin-top:.1rem;
}

/* ============================================================
   PRICING  (exact recreation)
   ============================================================ */
.pricing{ background:#FFFFFF; }

.pr-head{
  text-align:center;
  max-width:640px;
  margin-inline:auto;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.pr-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#4A4A4A;
  background:#F5F5F3;
  border:1px solid #E7E6E2;
  border-radius:999px;
  padding:.4rem .9rem;
  margin-bottom:1.4rem;
}
.pr-head h2{
  font-family:var(--sans);
  font-weight:650;
  font-size:clamp(2.3rem, 5vw, 3.35rem);
  line-height:1.08;
  letter-spacing:-0.025em;
  color:#1B1B1B;
  margin-bottom:1rem;
}
.pr-head > p{
  font-size:.95rem;
  color:#6B6B6B;
  max-width:44ch;
  margin-inline:auto;
}

.pr-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  align-items:start;
}

/* card shell */
.pr-card{
  background:#F7F6F3;
  border-radius:20px;
  overflow:hidden;
}
.pr-card.dark{ background:#1a1a1a; }

/* inner header card */
.pr-top{
  background:#FFFFFF;
  border-radius:16px;
  margin:.6rem;
  padding:1.5rem 1.6rem 1.7rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  min-height:8.2rem;
}
.pr-card.dark .pr-top{
  background:#1D2026;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pr-top h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.28rem;
  letter-spacing:-0.015em;
  color:#1B1B1B;
  margin-bottom:.55rem;
}
.pr-card.dark .pr-top h3{ color:#FFFFFF; }
.pr-top p{
  font-size:.88rem;
  line-height:1.5;
  color:#6B6B6B;
}
.pr-card.dark .pr-top p{ color:#9BA0A8; }

/* card body */
.pr-body{ padding:1.3rem 1.6rem 1.5rem; }

.pr-price{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin-bottom:1.2rem;
}
.pr-price .amt{
  font-family:var(--sans);
  font-weight:700;
  font-size:2.55rem;
  letter-spacing:-0.03em;
  color:#1B1B1B;
  font-variant-numeric:tabular-nums;
}
.pr-card.dark .pr-price .amt{ color:#FFFFFF; }
.pr-price .term{
  font-size:.78rem;
  color:#8A8A8A;
}

.pr-btn{
  display:block;
  text-align:center;
  background:#1B1D22;
  color:#FFFFFF;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  padding:.95rem 1rem;
  border-radius:999px;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.pr-card.dark .pr-btn{ background:#FFFFFF; color:#1B1D22; }
.pr-btn:hover{ opacity:.88; }

/* features */
.pr-feats{
  border-top:1px solid #E6E4DF;
  margin-top:1.4rem;
  padding-top:1.3rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.pr-card.dark .pr-feats{ border-top-color:#2A2D34; }
.pr-feats li{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  color:#3A3A3A;
}
.pr-card.dark .pr-feats li{ color:#B7BBC2; }
.pr-feats svg{
  width:18px; height:18px;
  flex-shrink:0;
  stroke:#5A5A5A;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pr-card.dark .pr-feats svg{ stroke:#9BA0A8; }
.pr-feats .glyph{
  width:18px;
  text-align:center;
  font-family:var(--mono);
  font-size:.8rem;
  color:#5A5A5A;
  flex-shrink:0;
}

/* Framer toggle row */
.pr-toggle{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:1.1rem;
  font-size:.9rem;
  color:#3A3A3A;
  cursor:pointer;
  user-select:none;
}
.pr-card.dark .pr-toggle{ color:#B7BBC2; }
.pr-toggle input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}
.pr-toggle .tg{
  position:relative;
  width:42px; height:24px;
  border-radius:999px;
  background:#D6D4CF;
  transition:background .3s var(--ease);
  flex-shrink:0;
}
.pr-toggle .tg::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#FFFFFF;
  transition:transform .3s var(--ease);
}
.pr-toggle input:checked + .tg{ background:#2FC97C; }
.pr-toggle input:checked + .tg::after{ transform:translateX(18px); }
.pr-toggle input:focus-visible + .tg{ outline:2px solid var(--accent); outline-offset:2px; }

/* payment footer */
.pr-foot{
  border-top:1px solid #E6E4DF;
  margin-top:1.4rem;
  padding-top:1.1rem;
  text-align:center;
  font-size:.72rem;
  color:#8A8A8A;
}
.pr-card.dark .pr-foot{ border-top-color:#2A2D34; color:#787D86; }
.pr-foot strong{
  font-weight:700;
  color:#3A3A3A;
  letter-spacing:-0.02em;
}
.pr-card.dark .pr-foot strong{ color:#C9CDD4; }
.pr-foot .contra{
  font-family:var(--serif);
  font-weight:500;
  color:#3A3A3A;
}
.pr-card.dark .pr-foot .contra{ color:#C9CDD4; }

/* ============================================================
   07 — PROOF
   ============================================================ */
.proof-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.5rem, 3vw, 3rem);
}

.proof{
  border-left:1px solid var(--line);
  padding-left:1.25rem;
}
.proof .figure{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-bottom:.4rem;
}
.proof .figure em{ font-style:italic; font-weight:340; }
.proof p{ color:var(--muted); font-size:.9rem; max-width:22ch; }

/* ============================================================
   08 — FINAL CTA  +  09 — FOOTER  (ink block)
   ============================================================ */
.close{
  background:var(--ink);
  color:var(--bg);
}

.close-inner{
  padding-block:var(--space-section) clamp(3.5rem, 7vw, 6rem);
  text-align:left;
}

.close .meta{ color:color-mix(in srgb, var(--bg) 55%, transparent); }

.close h2{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  max-width:14ch;
  margin-block:1.6rem 2.4rem;
  text-wrap:balance;
}

.close-ctas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.6rem;
}
.close .btn-solid{
  background:var(--bg);
  color:var(--ink);
  border-color:var(--bg);
}
.close .btn-solid:hover{
  background:transparent;
  color:var(--bg);
}
.close .u-link{
  color:color-mix(in srgb, var(--bg) 70%, transparent);
  font-size:.95rem;
}
.close .u-link:hover{ color:var(--bg); }

.footer{
  border-top:1px solid color-mix(in srgb, var(--bg) 18%, transparent);
  padding-block:2.2rem 2.6rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
}
.footer .wordmark{ font-size:1.1rem; }
.footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.8rem;
}
.footer a{
  font-size:.88rem;
  color:color-mix(in srgb, var(--bg) 60%, transparent);
  transition:color .3s var(--ease);
}
.footer a:hover{ color:var(--bg); }
.footer .fine{
  width:100%;
  font-size:.78rem;
  color:color-mix(in srgb, var(--bg) 55%, transparent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .work-pair{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc-card{ min-height:260px; }
  .ww-grid{ grid-template-columns:1fr; }
  .pr-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .work-pair .project:nth-child(2){ margin-top:0; }
  .why-grid{ grid-template-columns:1fr; }
  .proof-grid{ grid-template-columns:repeat(2, 1fr); row-gap:2.5rem; }
  .ledger-row{ grid-template-columns:3.5rem 1fr; }
  .ledger-row p{ grid-column:2; }
  .step{ grid-template-columns:3.5rem 1fr; }
}

@media (max-width: 640px){
  .nav-links{
    position:fixed;
    inset:0;
    height:100vh; /* backdrop-filter op .nav maakt de nav het containing block; zonder expliciete hoogte valt het paneel terug op de navhoogte */
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    background:var(--bg);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
    z-index:40;
  }
  .nav-links.open{ transform:none; }
  .nav-links a:not(.btn){ font-size:1.4rem; font-family:var(--serif); color:var(--ink); }

  .nav-toggle{
    display:block;
    z-index:45;
    background:none;
    border:0;
    font-family:var(--mono);
    font-size:var(--step-meta);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
    cursor:pointer;
    padding:.4rem 0;
  }

  .hero h1{ max-width:none; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .section-head{ flex-direction:column; gap:.4rem; }
  .proof-grid{ grid-template-columns:1fr; }
  .ph-wide{ aspect-ratio:4/3.4; }
  .ph-tall{ aspect-ratio:4/4.2; }
  .ph-mid{ aspect-ratio:4/3.4; }
  .close h2{ max-width:none; }
}

/* ============================================================
   OFFERTEFLOW (/offerte.html) — hergebruikt bestaande tokens,
   typografie en componenten (.wrap, .btn, .meta, .u-link, .lede)
   ============================================================ */
.quote-header{ display:block; }
.quote-header .nav-inner{ padding-block:1.1rem; }
.quote-exit{ font-size:.9rem; color:var(--muted); }
.quote-exit:hover{ color:var(--ink); }

.quote-progress-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-block:0 1.1rem;
}
.quote-progress-inner[hidden]{ display:none; }
.quote-step-count{ white-space:nowrap; }
.quote-progress-track{
  flex:1;
  height:2px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.quote-progress-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .4s var(--ease);
}

.quote-main{
  padding-block:clamp(3rem, 7vw, 6rem) var(--space-section);
  min-height:64vh;
}
.quote-wrap{ max-width:680px; }

#quote-steps{
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
#quote-steps.q-leaving{ opacity:0; transform:translateY(-10px); }
#quote-steps.q-entered{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  #quote-steps{ transition:none; }
}

.q-eyebrow{ display:block; margin-bottom:1rem; }
.q-title{
  font-size:var(--step-h2);
  margin-bottom:.75rem;
  max-width:22ch;
}
.q-sub{ margin-bottom:2.5rem; max-width:52ch; }
.q-note{
  margin-top:1.5rem;
  color:var(--muted);
  font-size:.85rem;
}

.q-options{ display:grid; gap:1rem; }
.q-options--cards{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:640px){
  .q-options--cards{ grid-template-columns:1fr; }
}

.q-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  text-align:left;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.4rem 2.6rem 1.4rem 1.5rem;
  font-family:var(--sans);
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.q-card:hover{ border-color:var(--ink); }
.q-card.selected{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, var(--bg-deep));
}
.q-card-title{ font-weight:600; color:var(--ink); font-size:1.02rem; }
.q-card-desc{ font-size:.85rem; color:var(--muted); line-height:1.5; }

.q-check{
  position:absolute;
  top:1.3rem;
  right:1.3rem;
  width:18px;
  height:18px;
  border-radius:5px;
  border:1.5px solid var(--line);
  background:var(--bg);
  flex-shrink:0;
}
.q-card.selected .q-check{
  background:var(--accent);
  border-color:var(--accent);
}
.q-card.selected .q-check::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:rotate(40deg);
}

.q-other{ margin-top:1.5rem; }

.q-field{ margin-bottom:1.4rem; }
.q-field label{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}
.q-input{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  transition:border-color .25s var(--ease);
}
.q-input:focus-visible{ outline:none; border-color:var(--ink); }
textarea.q-input{ min-height:140px; line-height:1.6; resize:vertical; }
.q-other-input{ min-height:90px; }

.q-error{
  display:block;
  margin-top:.5rem;
  color:#B4453D;
  font-size:.8rem;
}
.q-field.invalid .q-input{ border-color:#B4453D; }

.q-privacy-note{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:1.4rem;
}
.q-checkbox-row{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  font-size:.85rem;
  color:var(--muted);
  cursor:pointer;
}
.q-checkbox-row input{ margin-top:.2rem; flex-shrink:0; }
.q-checkbox-row a{ color:var(--ink); text-decoration:underline; }

.q-summary-row{
  padding-block:1.1rem;
  border-bottom:1px solid var(--line);
}
.q-summary-row:first-child{ padding-top:0; }
.q-summary-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.35rem;
}
.q-summary-head .q-edit{ font-size:.82rem; color:var(--muted); }
.q-summary-head .q-edit:hover{ color:var(--ink); }
.q-summary-value{ color:var(--ink); }
.q-submit-error{ margin-top:1.5rem; }

.q-done{ text-align:left; }
.q-done .btn{ margin-top:.5rem; }

.quote-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.quote-nav[hidden]{ display:none; }
.quote-nav .btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

@media (max-width:640px){
  .q-title{ max-width:none; }
  .quote-nav{ gap:1rem; }
  .quote-nav .btn{ flex:1; justify-content:center; }
}

/* ============================================================
   FAQ (/faq.html) — native <details> accordion, geen JS nodig
   ============================================================ */
.faq-wrap{ max-width:820px; }

.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-child{ border-top:1px solid var(--line); }

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.5rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--sans);
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.faq-icon{
  position:relative;
  flex-shrink:0;
  width:20px;
  height:20px;
}
.faq-icon::before, .faq-icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-icon::before{ width:12px; height:1.5px; }
.faq-icon::after{ width:1.5px; height:12px; }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.faq-answer{
  padding-bottom:1.6rem;
  padding-right:3rem;
  color:var(--muted);
  max-width:64ch;
}
.faq-answer p{ line-height:1.7; }

@media (prefers-reduced-motion: no-preference){
  .faq-item[open] summary + .faq-answer{
    animation:faqReveal .3s var(--ease);
  }
}
@keyframes faqReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

@media (max-width:640px){
  .faq-item summary{ font-size:1rem; padding-block:1.2rem; }
  .faq-answer{ padding-right:0; }
}

/* ============================================================
   FOUNDER — introductie van de oprichter
   ============================================================ */
.founder{ background:var(--bg-deep); }

.founder-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
}

.founder-photo{
  aspect-ratio:4/4.6;
  border-radius:var(--radius);
  background:var(--surf-sage);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.founder-photo .ph-mark{ opacity:.32; }
.founder-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

.founder-copy{ position:relative; }
.founder-quote-mark{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:4rem;
  line-height:1;
  color:var(--accent);
  margin-bottom:.5rem;
}
.founder-copy .meta{ display:block; margin-bottom:1.4rem; }
.founder-copy p{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  max-width:56ch;
  margin-bottom:1.2rem;
}
.founder-copy p:last-of-type{ margin-bottom:2rem; }

.founder-sig{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  max-width:56ch;
}
.founder-sig strong{
  font-family:var(--sans);
  font-weight:600;
  color:var(--ink);
  font-size:.98rem;
}
.founder-sig span{
  font-size:.88rem;
  color:var(--muted);
}

@media (max-width:900px){
  .founder-grid{ grid-template-columns:1fr; }
  .founder-photo{ aspect-ratio:4/4.6; max-width:420px; }
  .founder-photo img{ object-position:top center; }
}

/* ============================================================
   LEGAL (algemene voorwaarden / privacy) — lange tekstpagina's
   ============================================================ */
.legal-wrap{ max-width:760px; }

.legal-title{
  font-size:var(--step-h2);
  margin-block:1rem .75rem;
}
.legal-version{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:2rem;
}
.legal-intro{
  color:var(--muted);
  max-width:60ch;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
  border-bottom:1px solid var(--line);
}

.legal h2{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--line);
  margin-bottom:1.1rem;
}
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }

.legal p{
  color:var(--muted);
  line-height:1.7;
  max-width:62ch;
  margin-bottom:1rem;
}
.legal ol{
  padding-left:1.3rem;
  margin-block:1rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.legal ul{
  list-style:disc;
  padding-left:1.3rem;
  margin-block:.6rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.legal li{
  color:var(--muted);
  line-height:1.65;
  max-width:62ch;
}
.legal li ul{ margin-top:.7rem; }
.legal strong{ color:var(--ink); font-weight:600; }

.legal-contact{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  color:var(--muted);
  font-size:.95rem;
}
.legal-contact strong{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:400;
  color:var(--ink);
  margin-bottom:.3rem;
}
.legal-contact a{ color:var(--ink); text-decoration:underline; }

/* ============================================================
   PRICING — optionele uitbreidingen (pill-chips)
   ============================================================ */
.pr-extras{
  margin-top:clamp(3rem, 6vw, 5rem);
  padding-top:clamp(2.5rem, 5vw, 4rem);
  border-top:1px solid var(--line);
  text-align:center;
}
.pr-extras > .meta{
  display:block;
  margin-bottom:1.6rem;
}

.pr-chip-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  max-width:900px;
  margin-inline:auto;
}
.pr-chip-list li{
  list-style:none;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--ink);
  background:#F5F5F3;
  border:1px solid #E7E6E2;
  border-radius:999px;
  padding:.55rem 1.15rem;
}

/* ============================================================
   COOKIEBANNER
   ============================================================ */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:var(--ink);
  color:var(--bg);
  transform:translateY(100%);
  transition:transform .5s var(--ease);
  box-shadow:0 -8px 30px rgba(0,0,0,.12);
}
.cookie-banner.in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:none; }
}

.cookie-banner-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.4rem;
}

.cookie-banner-text{
  font-size:.9rem;
  line-height:1.6;
  color:color-mix(in srgb, var(--bg) 82%, transparent);
  max-width:62ch;
}
.cookie-banner-text a{
  color:var(--bg);
  text-decoration:underline;
}

.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-shrink:0;
}
.cookie-banner .btn-solid{
  background:var(--bg);
  color:var(--ink);
  border-color:var(--bg);
}
.cookie-banner .btn-solid:hover{
  background:transparent;
  color:var(--bg);
}
.cookie-banner .btn-ghost{
  color:var(--bg);
  border-color:color-mix(in srgb, var(--bg) 45%, transparent);
}
.cookie-banner .btn-ghost:hover{
  background:var(--bg);
  color:var(--ink);
}

.cookie-prefs-link{
  display:inline;
  background:none;
  border:0;
  padding:0;
  margin-top:.4rem;
  font-family:var(--sans);
  font-size:.78rem;
  color:color-mix(in srgb, var(--bg) 55%, transparent);
  text-decoration:underline;
  cursor:pointer;
}
.cookie-prefs-link:hover{ color:var(--bg); }

@media (max-width:640px){
  .cookie-banner-inner{ padding-block:1.2rem; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; justify-content:center; }
}

/* ============================================================
   HERO — RAKETLANCERING
   Pure CSS/SVG-animatie, geen dependencies. Copy links,
   raket rechts; rook groeit organisch tijdens de lancering.
   ============================================================ */
.hero{ overflow:hidden; } /* rookwolk mag buiten zijn kolom steken, niet buiten de pagina */

.hero-grid{
  display:grid;
  grid-template-columns:11fr 9fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
}

.hero-grid h1{
  font-size:clamp(2.6rem, 4.8vw, 4.5rem);
  margin-bottom:clamp(1.5rem, 3vw, 2.2rem);
}
.hero-copy .hero-meta{ margin-bottom:clamp(1.5rem, 3vw, 2.2rem); }
.hero-copy .lede{
  font-size:1.125rem;
  margin-bottom:clamp(1.8rem, 3.5vw, 2.6rem);
}

/* --- scene ------------------------------------------------------- */
.hero-visual{ pointer-events:none; }

.rocket-scene{
  position:relative;
  height:clamp(380px, 40vw, 540px);
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

/* --- raket -------------------------------------------------------- */
.rocket-wrap{
  position:relative;
  z-index:1;
  width:clamp(130px, 13vw, 185px);
  margin-bottom:clamp(120px, 13vw, 170px);
  animation:
    rocketLaunch 7s cubic-bezier(.3,.5,.25,1) .6s both,
    rocketFloat 6s ease-in-out 7.6s infinite alternate;
  will-change:transform;
}
.rocket-svg{ display:block; width:100%; height:auto; }

/* --- uitlaatvlam --------------------------------------------------- */
.rocket-flame{
  position:absolute;
  left:50%;
  top:97%;
  width:17%;
  height:34%;
  transform:translateX(-50%);
  transform-origin:top center;
  background:linear-gradient(to bottom, #C9924E 0%, #E0BE87 40%, #EFE3CB 75%, transparent 100%);
  border-radius:46% 46% 50% 50% / 18% 18% 82% 82%;
  filter:blur(2px);
  opacity:0;
  animation:
    flameIgnite .9s ease-out .8s forwards,
    flameFlicker .55s ease-in-out 1.7s infinite alternate;
  will-change:transform, opacity;
}

/* --- rookwolk ------------------------------------------------------ */
.rocket-smoke{
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:0;
  height:46%;
  z-index:2;
  transform-origin:50% 100%;
  animation:smokeGrow 7s cubic-bezier(.3,.5,.25,1) .9s both;
  will-change:transform, opacity;
}

.puff{
  position:absolute;
  bottom:0;
  border-radius:50%;
  filter:blur(16px);
  animation:puffDrift var(--t, 9s) ease-in-out var(--d, 0s) infinite alternate;
  will-change:transform;
}
@keyframes puffDrift{
  from{ transform:translate(0, 0) scale(1); }
  to{ transform:translate(var(--dx, 12px), var(--dy, -8px)) scale(var(--ds, 1.14)); }
}

/* onderste band — breed en dicht */
.p1{ left:2%;  width:26%; aspect-ratio:1; background:#E7DCC6; opacity:.9;  --t:10s;  --d:-3s;  --dx:-16px; --ds:1.18; }
.p2{ left:20%; width:32%; aspect-ratio:1; background:#DFD3B9; opacity:.95; --t:8.5s; --d:-6s;  --dx:10px;  --ds:1.12; }
.p3{ left:42%; width:34%; aspect-ratio:1; background:#E7DCC6; opacity:1;   --t:11s;  --d:-1s;  --dx:-12px; --ds:1.2;  }
.p4{ left:62%; width:30%; aspect-ratio:1; background:#DFD3B9; opacity:.95; --t:9s;   --d:-4.5s;--dx:14px;  --ds:1.15; }
.p5{ left:80%; width:24%; aspect-ratio:1; background:#E7DCC6; opacity:.85; --t:10.5s;--d:-7s;  --dx:18px;  --ds:1.22; }
/* middenlaag — lichter, iets hoger */
.p6{ left:12%; bottom:26%; width:22%; aspect-ratio:1; background:#EFE7D4; opacity:.8; --t:12s; --d:-2s;  --dx:-10px; --dy:-14px; --ds:1.25; }
.p7{ left:38%; bottom:34%; width:26%; aspect-ratio:1; background:#F1EADA; opacity:.8; --t:9.5s;--d:-5s;  --dx:8px;   --dy:-18px; --ds:1.3;  }
.p8{ left:62%; bottom:28%; width:22%; aspect-ratio:1; background:#EFE7D4; opacity:.75;--t:11.5s;--d:-8s; --dx:12px;  --dy:-12px; --ds:1.2;  }
/* kern — direct onder de vlam */
.p9{ left:40%; bottom:12%; width:22%; aspect-ratio:1; background:#F4EEDF; opacity:.9; --t:7s;  --d:-3.5s;--dx:-6px;  --dy:-20px; --ds:1.35; }

/* --- keyframes ----------------------------------------------------- */
@keyframes rocketLaunch{
  from{ transform:translateY(110px); }
  to{   transform:translateY(-26px); }
}
@keyframes rocketFloat{
  from{ transform:translateY(-26px); }
  to{   transform:translateY(-42px); }
}
@keyframes flameIgnite{
  from{ opacity:0; transform:translateX(-50%) scaleY(.15); }
  to{   opacity:1; transform:translateX(-50%) scaleY(1); }
}
@keyframes flameFlicker{
  from{ transform:translateX(-50%) scaleY(1) scaleX(1); }
  to{   transform:translateX(-50%) scaleY(1.16) scaleX(.92); }
}
@keyframes smokeGrow{
  from{ opacity:0; transform:scale(.3); }
  to{   opacity:1; transform:scale(1); }
}

/* --- reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .rocket-wrap{ animation:none; transform:translateY(-26px); }
  .rocket-flame{ animation:none; opacity:1; transform:translateX(-50%); }
  .rocket-smoke{ animation:none; transform:none; opacity:1; }
  .puff{ animation:none; }
}

/* --- responsive ---------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-grid h1{ font-size:clamp(2.5rem, 8vw, 3.6rem); }
  .rocket-scene{ height:clamp(320px, 68vw, 420px); }
  .rocket-wrap{ width:clamp(110px, 24vw, 150px); margin-bottom:clamp(100px, 22vw, 140px); }
  /* minder blur-lagen op mobiel voor performance */
  .p6, .p8{ display:none; }
  .puff{ filter:blur(12px); }
}

/* ============================================================
   BLOG — artikel & overzicht
   ============================================================ */
.article-wrap{ max-width:760px; }

.article-intro{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.6;
  color:var(--ink);
  max-width:60ch;
  margin-bottom:1.2rem;
}

.article h2{
  font-family:var(--sans);
  font-weight:650;
  font-size:1.5rem;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin-top:3.2rem;
  margin-bottom:1.1rem;
}
.article h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-top:2rem;
  margin-bottom:.8rem;
}
.article p{
  color:var(--muted);
  line-height:1.75;
  max-width:62ch;
  margin-bottom:1.1rem;
}
.article ul, .article ol{
  padding-left:1.3rem;
  margin-block:1rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.article ul{ list-style:disc; }
.article ol{ list-style:decimal; }
.article li{
  color:var(--muted);
  line-height:1.65;
  max-width:60ch;
}
.article strong{ color:var(--ink); font-weight:600; }

.article-pricing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-block:1.6rem 1.8rem;
}
.article-price-card{
  background:var(--bg-deep);
  border-radius:12px;
  padding:1.5rem 1.6rem;
}
.article-price-card strong{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:1.02rem;
  color:var(--ink);
  margin-bottom:.6rem;
}
.article-price-card p{
  font-size:.92rem;
  margin-bottom:0;
}

.article-cta{
  margin-top:clamp(3.5rem, 6vw, 5rem);
  padding:clamp(2.2rem, 5vw, 3.2rem);
  background:var(--bg-deep);
  border-radius:16px;
  text-align:center;
}
.article-cta .meta{ display:block; margin-bottom:1rem; }
.article-cta h2{
  font-size:var(--step-h3);
  margin-top:0;
  margin-bottom:1rem;
  max-width:22ch;
  margin-inline:auto;
}
.article-cta .lede{
  margin-inline:auto;
  margin-bottom:1.6rem;
}
.article-cta-prices{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  list-style:none;
  padding:0;
  margin-bottom:1.8rem;
}
.article-cta-prices li{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem 1.1rem;
}

/* --- blog index ------------------------------------------------------ */
.blog-list{ display:flex; flex-direction:column; }
.blog-card{
  padding-block:2.2rem;
  border-bottom:1px solid var(--line);
}
.blog-card:first-child{ border-top:1px solid var(--line); }
.blog-card-meta{ display:block; margin-bottom:.8rem; }
.blog-card h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--step-h3);
  letter-spacing:-0.01em;
  margin-bottom:.7rem;
}
.blog-card h2 a{ transition:color .3s var(--ease); }
.blog-card h2 a:hover{ color:var(--accent); }
.blog-card p{
  color:var(--muted);
  max-width:62ch;
  margin-bottom:1rem;
}
.blog-card .u-link{ font-size:.9rem; }

@media (max-width:640px){
  .article-pricing{ grid-template-columns:1fr; }
  .article h2{ font-size:1.3rem; }
}