/* ════════════════════════════════════════════════════════════════
   EMDALY SOLUTIONS — Design System v4.0
   Strak, professional, geen saai crème, geen italic serif
   Stack: vanilla CSS, GSAP via CDN (geen Lenis, native scroll)
   ════════════════════════════════════════════════════════════════ */

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{min-height:100vh;line-height:1.55;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{font-weight:inherit;line-height:1;text-wrap:balance;letter-spacing:-0.03em}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
::selection{background:var(--text);color:var(--accent)}

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root{
  /* Color — crispy neutral, not creme */
  --bg:#fafaf8;
  --bg-card:#ffffff;
  --bg-warm:#f2f2ee;
  --bg-dark:#0a0a0a;
  --bg-darker:#000000;
  --text:#0a0a0a;
  --text-soft:#525252;
  --text-muted:#999999;
  --text-on-dark:#fafaf8;
  --text-on-dark-soft:#8a8a8a;
  --accent:#c8ff00;
  --accent-dark:#2d3700;
  --border:rgba(10,10,10,0.09);
  --border-strong:rgba(10,10,10,0.18);
  --border-dark:rgba(250,250,248,0.1);

  /* Typography — Inter Tight for display, Inter for body */
  --font-display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;

  /* Fluid type scale */
  --fs-mono:0.7rem;
  --fs-xs:0.8125rem;
  --fs-sm:0.9375rem;
  --fs-base:clamp(0.9375rem,0.9rem + 0.2vw,1rem);
  --fs-lg:clamp(1.0625rem,1rem + 0.3vw,1.1875rem);
  --fs-xl:clamp(1.25rem,1.1rem + 0.6vw,1.4375rem);
  --fs-2xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --fs-3xl:clamp(2rem,1.6rem + 2vw,3rem);
  --fs-4xl:clamp(2.5rem,1.8rem + 3.5vw,4.25rem);
  --fs-5xl:clamp(3rem,2rem + 5vw,5.5rem);
  --fs-6xl:clamp(3.5rem,2rem + 7vw,7.5rem);
  --fs-hero:clamp(3.25rem,1.5rem + 8.5vw,9.5rem);

  /* Spacing */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;
  --section-y:clamp(5rem,4rem + 7vw,10rem);
  --container-x:clamp(1.5rem,3vw + 0.5rem,4rem);

  /* Layout */
  --container:1440px;
  --container-narrow:920px;
  --container-wide:1680px;
  --radius-sm:4px;
  --radius:8px;
  --radius-lg:16px;
  --radius-xl:24px;

  /* Motion */
  --ease:cubic-bezier(0.65,0,0.35,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.83,0,0.17,1);
  --dur-fast:0.25s;
  --dur:0.5s;
  --dur-slow:0.8s;

  /* Z */
  --z-nav:100;
  --z-overlay:200;
}

/* ─── BASE ──────────────────────────────────────────────── */
html,body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);font-weight:400;letter-spacing:-0.011em}
body{overflow-x:hidden}

/* ─── CONTAINER ─────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--container-x)}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-wide)}

/* ─── TYPOGRAPHY HELPERS ────────────────────────────────── */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.18em;color:var(--text-muted);font-weight:500;display:inline-flex;align-items:center;gap:var(--space-3)}
.eyebrow::before{content:'';display:inline-block;width:20px;height:1px;background:currentColor}
.eyebrow--center{justify-content:center}

.display{font-family:var(--font-display);font-weight:500;line-height:0.92;letter-spacing:-0.04em}

.h1{font-family:var(--font-display);font-size:var(--fs-6xl);font-weight:500;line-height:0.92;letter-spacing:-0.045em}
.h2{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:500;line-height:0.95;letter-spacing:-0.04em}
.h3{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:500;line-height:1.05;letter-spacing:-0.03em}
.h4{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;line-height:1.15;letter-spacing:-0.025em}

.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text-soft);font-weight:400;max-width:52ch;letter-spacing:-0.01em}

.text-mono{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;font-weight:500}
.text-soft{color:var(--text-soft)}
.text-muted{color:var(--text-muted)}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:var(--space-4) 0;
  transition:padding 0.3s var(--ease),background 0.3s var(--ease),border-color 0.3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav--scrolled{
  padding:var(--space-3) 0;
  background:rgba(250,250,248,0.88);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--border);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}

.nav__logo{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-0.03em;
  display:inline-flex;align-items:baseline;gap:2px;
  transition:opacity var(--dur-fast) var(--ease);
  text-transform:uppercase;
}
.nav__logo:hover{opacity:0.6}
.nav__logo .dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:2px}

.nav__links{display:flex;align-items:center;gap:var(--space-7)}
.nav__link{
  font-size:var(--fs-sm);font-weight:450;color:var(--text);
  position:relative;padding:var(--space-2) 0;
  transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;
  transition:width 0.3s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current]::after{width:100%}

.nav__cta{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  background:var(--text);color:var(--bg);
  border-radius:100px;font-size:var(--fs-sm);font-weight:500;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.nav__cta::after{content:'→';transition:transform var(--dur-fast) var(--ease)}
.nav__cta:hover{transform:translateY(-2px)}
.nav__cta:hover::after{transform:translateX(3px)}

.nav__lang{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em}
.nav__lang button{
  padding:var(--space-1) var(--space-2);color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease);font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:500;
}
.nav__lang button:hover,.nav__lang button.is-active{color:var(--text)}
.nav__lang span{color:var(--border-strong)}

.nav__toggle{
  display:none;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:50%;
}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform 0.3s var(--ease),opacity 0.3s var(--ease)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:960px){
  .nav__links,.nav__lang{display:none}
  .nav__toggle{display:flex}
}

/* Mobile fullscreen menu */
.nav-overlay{
  position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);
  background:var(--bg-dark);color:var(--text-on-dark);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:var(--space-9) var(--container-x);
  transform:translateY(-100%);transition:transform 0.6s var(--ease-in-out);
  overflow-y:auto;
}
.nav-overlay.is-open{transform:translateY(0)}
.nav-overlay__inner{width:100%;max-width:var(--container);margin:0 auto}
.nav-overlay__links{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8)}
.nav-overlay__links a{
  font-family:var(--font-display);font-size:clamp(2.5rem,9vw,5rem);font-weight:500;line-height:1;letter-spacing:-0.035em;
  display:inline-block;
  opacity:0;transform:translateY(40px);
  transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out),color 0.25s var(--ease);
}
.nav-overlay__links a:hover{color:var(--accent)}
.nav-overlay.is-open .nav-overlay__links a{opacity:1;transform:translateY(0)}
.nav-overlay.is-open .nav-overlay__links a:nth-child(1){transition-delay:0.1s}
.nav-overlay.is-open .nav-overlay__links a:nth-child(2){transition-delay:0.15s}
.nav-overlay.is-open .nav-overlay__links a:nth-child(3){transition-delay:0.2s}
.nav-overlay.is-open .nav-overlay__links a:nth-child(4){transition-delay:0.25s}
.nav-overlay.is-open .nav-overlay__links a:nth-child(5){transition-delay:0.3s}
.nav-overlay.is-open .nav-overlay__links a:nth-child(6){transition-delay:0.35s}

.nav-overlay__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-dark);width:100%}
.nav-overlay__meta-block .text-mono{color:var(--text-on-dark-soft);margin-bottom:var(--space-2);display:block}
.nav-overlay__meta-block a{color:var(--text-on-dark);font-size:var(--fs-base);transition:color var(--dur-fast)}
.nav-overlay__meta-block a:hover{color:var(--accent)}

body.menu-open{overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  font-size:var(--fs-sm);font-weight:500;letter-spacing:-0.01em;
  border-radius:100px;border:1px solid transparent;
  transition:all 0.3s var(--ease);
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.btn__arrow{display:inline-block;transition:transform 0.3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--primary:hover{background:transparent;color:var(--text)}

.btn--accent{background:var(--accent);color:var(--text);border-color:var(--accent);font-weight:600}
.btn--accent:hover{background:var(--text);color:var(--accent);border-color:var(--text)}

.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text)}

.btn--dark-ghost{background:transparent;color:var(--text-on-dark);border-color:var(--border-dark)}
.btn--dark-ghost:hover{background:var(--accent);color:var(--text);border-color:var(--accent)}

.btn--lg{padding:var(--space-5) var(--space-7);font-size:var(--fs-base)}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:var(--fs-sm);font-weight:500;
  padding-bottom:var(--space-1);
  border-bottom:1px solid currentColor;
  transition:gap var(--dur-fast) var(--ease);
}
.link-arrow:hover{gap:var(--space-4)}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding:clamp(8rem,18vh,13rem) 0 var(--space-9);
  min-height:92vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__inner{position:relative;z-index:2}
.hero__meta{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);
  margin-bottom:var(--space-8);
  padding-bottom:var(--space-4);border-bottom:1px solid var(--border);
}
.hero__status{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.16em;color:var(--text-soft);font-weight:500}
.hero__status::before{content:'';width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0.5);animation:pulse 2.5s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.hero__year{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}

.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  font-weight:500;
  line-height:0.9;
  letter-spacing:-0.05em;
  margin-bottom:var(--space-8);
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:0.04em}
.hero__title .word{display:inline-block;will-change:transform,opacity}

/* Wow moment 1: lime highlight sweep — now strak, geen italic */
.hero__title .highlight{position:relative;display:inline-block;padding:0 0.05em;color:var(--text);z-index:1}
.hero__title .highlight::before{
  content:'';position:absolute;inset:0.1em -0.05em 0.1em -0.05em;
  background:var(--accent);
  z-index:-1;
  transform-origin:left center;transform:scaleX(0);
  transition:transform 0.85s 0.35s var(--ease-in-out);
}
.hero__title .highlight.is-lit::before{transform:scaleX(1)}

.hero__bottom{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-7);align-items:end;
  padding-top:var(--space-5);border-top:1px solid var(--border);
}
.hero__sub{
  font-size:var(--fs-lg);
  line-height:1.55;
  color:var(--text-soft);
  max-width:52ch;
  letter-spacing:-0.01em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:flex-end}

@media(max-width:760px){
  .hero{padding-top:clamp(7rem,15vh,10rem);min-height:auto}
  .hero__bottom{grid-template-columns:1fr;justify-items:start}
  .hero__actions{justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════════════════ */
.marquee{
  padding:var(--space-6) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;
  background:var(--bg);
}
.marquee__track{
  display:flex;gap:var(--space-7);
  animation:marquee 50s linear infinite;
  width:max-content;
  align-items:center;
}
.marquee__item{
  display:inline-flex;align-items:center;gap:var(--space-7);
  font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2.75rem);font-weight:500;letter-spacing:-0.035em;
  white-space:nowrap;color:var(--text);
}
.marquee__item em{font-style:normal;color:var(--text-muted)}
.marquee__item::after{content:'●';font-size:0.35em;color:var(--accent);margin-left:var(--space-7);vertical-align:middle}
@keyframes marquee{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════ */
.section{padding:var(--section-y) 0;position:relative}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section--dark .eyebrow{color:var(--text-on-dark-soft)}
.section--dark .text-soft{color:var(--text-on-dark-soft)}

.section__head{
  display:grid;grid-template-columns:1fr 2fr;gap:var(--space-7);
  margin-bottom:var(--space-9);
  align-items:end;
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border);
}
.section--dark .section__head{border-bottom-color:var(--border-dark)}
.section__head--centered{grid-template-columns:1fr;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.section__label{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.16em;color:var(--text-muted);font-weight:500;align-self:start}
.section__head h2{margin-bottom:0}
.section__head .lead{margin-top:var(--space-4);max-width:48ch}
@media(max-width:760px){.section__head{grid-template-columns:1fr;gap:var(--space-3)}}

/* ═══════════════════════════════════════════════════════════
   SERVICES (homepage) — no more numbers
   ═══════════════════════════════════════════════════════════ */
.services{display:grid;gap:0;border-top:1px solid var(--border)}
.service-row{
  display:grid;grid-template-columns:1.2fr 2fr auto;gap:var(--space-6);
  padding:var(--space-7) var(--space-4);
  border-bottom:1px solid var(--border);
  align-items:center;
  position:relative;
  transition:padding 0.4s var(--ease),background 0.4s var(--ease);
}
.service-row::before{
  content:'';position:absolute;inset:0;background:var(--text);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 0.45s var(--ease-in-out);
  z-index:0;
}
.service-row:hover{padding-left:var(--space-6);padding-right:var(--space-6)}
.service-row:hover::before{transform:scaleY(1);transform-origin:top}
.service-row:hover>*{color:var(--bg);position:relative;z-index:1}
.service-row:hover .service-row__arrow{color:var(--accent);transform:translateX(8px)}
.service-row>*{transition:color 0.35s var(--ease);position:relative;z-index:1}

.service-row__title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:500;letter-spacing:-0.035em;line-height:1.05}
.service-row__desc{font-size:var(--fs-base);color:var(--text-soft);max-width:48ch;line-height:1.55}
.service-row__arrow{font-size:1.4rem;color:var(--text-muted);transition:transform 0.35s var(--ease),color 0.35s var(--ease);display:inline-block;font-weight:300}

@media(max-width:860px){
  .service-row{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-6) var(--space-3)}
  .service-row__arrow{position:absolute;top:var(--space-6);right:var(--space-3)}
  .service-row:hover{padding-left:var(--space-3);padding-right:var(--space-3)}
}

/* ═══════════════════════════════════════════════════════════
   WORK LIST — wow moment 2: hover image follows cursor
   ═══════════════════════════════════════════════════════════ */
.work{position:relative}
.work-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--border-dark)}
.work-list__item{border-bottom:1px solid var(--border-dark);position:relative}
.work-list__link{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--space-6);
  padding:var(--space-7) 0;
  align-items:center;
  position:relative;
}
.work-list__title{
  font-family:var(--font-display);font-size:clamp(1.75rem,5vw,4.5rem);font-weight:500;line-height:0.95;letter-spacing:-0.04em;
  color:var(--text-on-dark);
  transition:transform 0.4s var(--ease),color 0.4s var(--ease),padding 0.4s var(--ease);
  display:inline-block;
}
.work-list__tags{display:flex;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-on-dark-soft);font-weight:500}
.work-list__tags span:not(:last-child)::after{content:'·';margin-left:var(--space-3);color:var(--border-dark)}
.work-list__arrow{font-size:1.3rem;color:var(--text-on-dark-soft);transition:transform 0.4s var(--ease),color 0.4s var(--ease);font-weight:300}
.work-list__item:hover .work-list__title{padding-left:var(--space-5);color:var(--accent)}
.work-list__item:hover .work-list__arrow{transform:translateX(8px);color:var(--accent)}

@media(max-width:760px){
  .work-list__link{grid-template-columns:1fr auto;gap:var(--space-3);padding:var(--space-6) 0}
  .work-list__tags{display:none}
}

.work-preview{
  position:fixed;top:0;left:0;width:340px;height:240px;
  pointer-events:none;
  z-index:50;
  opacity:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.4);
  will-change:transform,opacity;
  transform:translate(-50%,-50%) scale(0.92);
}
.work-preview.is-visible{opacity:1}
.work-preview__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.work-preview__img.is-active{display:block}
@media(max-width:960px){.work-preview{display:none}}

/* ═══════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.process__step{
  padding:var(--space-7) var(--space-5);
  background:var(--bg-warm);
  border-radius:var(--radius);
  position:relative;
  transition:transform 0.35s var(--ease),background 0.35s var(--ease);
}
.process__step:hover{transform:translateY(-6px);background:var(--text);color:var(--bg)}
.process__step-title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.025em;margin-bottom:var(--space-3);line-height:1.1}
.process__step-text{font-size:var(--fs-sm);line-height:1.6;color:var(--text-soft);transition:color 0.35s var(--ease)}
.process__step:hover .process__step-text{color:var(--text-on-dark-soft)}
@media(max-width:960px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   QUOTE
   ═══════════════════════════════════════════════════════════ */
.quote{max-width:960px;margin:0 auto;text-align:center;padding:var(--space-9) 0}
.quote__text{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3vw,2.25rem);
  font-weight:500;line-height:1.3;letter-spacing:-0.028em;
  margin-bottom:var(--space-6);
  color:var(--text);
}
.quote__author{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.quote__author-name{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text);font-weight:500}
.quote__author-role{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-muted);letter-spacing:0.1em;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{
  width:100%;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:var(--space-5);
  padding:var(--space-6) var(--space-3);align-items:center;
  font-family:var(--font-display);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:500;letter-spacing:-0.025em;line-height:1.2;
  transition:padding 0.3s var(--ease);
  color:var(--text);
}
.faq__q:hover{padding-left:var(--space-5)}
.faq__icon{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-family:var(--font-body);font-weight:400;
  transition:transform 0.45s var(--ease),background 0.3s var(--ease),color 0.3s var(--ease),border-color 0.3s var(--ease);
}
.faq__item.is-open .faq__icon{transform:rotate(135deg);background:var(--text);color:var(--accent);border-color:var(--text)}
.faq__a{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease-in-out),padding 0.5s var(--ease-in-out);padding:0 var(--space-3)}
.faq__item.is-open .faq__a{max-height:600px;padding:0 var(--space-3) var(--space-6)}
.faq__a p{color:var(--text-soft);font-size:var(--fs-base);line-height:1.65;max-width:68ch}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════ */
.cta-section{
  background:var(--bg-dark);color:var(--text-on-dark);
  padding:var(--section-y) 0;
  position:relative;overflow:hidden;
}
.cta-section__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-9);align-items:end}
.cta-section h2{font-size:var(--fs-5xl);font-family:var(--font-display);font-weight:500;line-height:0.95;letter-spacing:-0.045em}
.cta-section h2 .accent{color:var(--accent)}
.cta-section__right{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.cta-section__sub{color:var(--text-on-dark-soft);max-width:38ch;font-size:var(--fs-base);line-height:1.6;margin-bottom:var(--space-3)}
@media(max-width:860px){.cta-section__inner{grid-template-columns:1fr}}

.cta-section__bg{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px circle at 20% 80%,rgba(200,255,0,0.06),transparent 50%);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer{
  background:var(--bg-darker);color:var(--text-on-dark);
  padding:var(--space-9) 0 var(--space-6);
  border-top:1px solid var(--border-dark);
}
.footer__top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-7);
  padding-bottom:var(--space-8);
  border-bottom:1px solid var(--border-dark);
  margin-bottom:var(--space-6);
}
.footer__brand{max-width:36ch}
.footer__logo{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-0.03em;display:inline-flex;align-items:baseline;gap:2px;margin-bottom:var(--space-4);text-transform:uppercase}
.footer__logo .dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:2px}
.footer__tagline{color:var(--text-on-dark-soft);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--space-5)}
.footer__contact{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-sm)}
.footer__contact a{color:var(--text-on-dark);transition:color var(--dur-fast) var(--ease);display:inline-flex;align-items:center;gap:var(--space-2)}
.footer__contact a:hover{color:var(--accent)}

.footer__col h4{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-on-dark-soft);font-weight:500;margin-bottom:var(--space-5)}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer__col a{color:var(--text-on-dark);font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease);display:inline-flex;align-items:center;gap:var(--space-2)}
.footer__col a:hover{color:var(--accent)}

.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-on-dark-soft);font-weight:500;
}
.footer__bottom a:hover{color:var(--accent)}

@media(max-width:960px){
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-5)}
  .footer__brand{grid-column:1/-1}
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.page-header{
  padding:clamp(8rem,18vh,11rem) 0 var(--space-9);
  border-bottom:1px solid var(--border);
}
.page-header__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
.page-header__crumb{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}
.page-header__crumb a{color:var(--text-muted);transition:color var(--dur-fast) var(--ease)}
.page-header__crumb a:hover{color:var(--text)}
.page-header__date{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);font-weight:500}
.page-header h1{font-family:var(--font-display);font-size:var(--fs-6xl);font-weight:500;line-height:0.92;letter-spacing:-0.045em;margin-bottom:var(--space-6);max-width:18ch}
.page-header__lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text-soft);max-width:58ch;letter-spacing:-0.01em}

/* ═══════════════════════════════════════════════════════════
   SERVICE DETAIL
   ═══════════════════════════════════════════════════════════ */
.service-block{
  padding:var(--space-9) 0;
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-9);
  align-items:start;
}
.service-block:last-child{border-bottom:0}
.service-block__title{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:500;line-height:0.95;letter-spacing:-0.04em}
.service-block__sticky{position:sticky;top:120px}
.service-block__lead{font-size:var(--fs-lg);font-weight:400;line-height:1.55;color:var(--text-soft);margin-bottom:var(--space-6);max-width:48ch;letter-spacing:-0.01em}
.service-block__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border)}
.service-block__list li{font-size:var(--fs-base);line-height:1.55;color:var(--text-soft);padding-bottom:var(--space-4);border-bottom:1px solid var(--border);padding-left:var(--space-5);position:relative}
.service-block__list li::before{content:'';position:absolute;left:0;top:0.55em;width:10px;height:1px;background:var(--text)}
.service-block__list li:last-child{border-bottom:0}
.service-block__price{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-5) 0;border-top:1px solid var(--border);flex-wrap:wrap}
.service-block__price-label{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}
.service-block__price-amount{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;letter-spacing:-0.025em}
@media(max-width:860px){.service-block{grid-template-columns:1fr;gap:var(--space-6)}.service-block__sticky{position:static}}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY DETAIL
   ═══════════════════════════════════════════════════════════ */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);padding:var(--space-7) 0;border-bottom:1px solid var(--border)}
.case-meta__item{display:flex;flex-direction:column;gap:var(--space-2)}
.case-meta__label{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}
.case-meta__value{font-family:var(--font-display);font-size:var(--fs-base);font-weight:500;letter-spacing:-0.015em}
@media(max-width:760px){.case-meta{grid-template-columns:1fr 1fr;gap:var(--space-5)}}

.case-content{padding:var(--space-9) 0;display:grid;grid-template-columns:1fr 2fr;gap:var(--space-9)}
.case-content h3{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.16em;color:var(--text-muted);position:sticky;top:140px;font-weight:500}
.case-content__body{font-size:var(--fs-lg);line-height:1.7;color:var(--text-soft);letter-spacing:-0.005em}
.case-content__body p{margin-bottom:var(--space-5)}
.case-content__body strong{color:var(--text);font-weight:600}
@media(max-width:860px){.case-content{grid-template-columns:1fr;gap:var(--space-5)}.case-content h3{position:static}}

.case-hero-visual{
  margin:var(--space-7) 0;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  background:var(--bg-warm);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.case-hero-visual::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(var(--border-strong) 1px,transparent 1px);
  background-size:20px 20px;opacity:0.5;
}
.case-hero-visual__label{position:relative;z-index:1;font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.16em;color:var(--text-muted);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════ */
.manifesto{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4vw,3.25rem);
  font-weight:500;line-height:1.15;letter-spacing:-0.035em;
  max-width:20ch;
}
.manifesto strong{font-weight:500;background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 0.1em}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-9)}
.principle{padding-top:var(--space-6);border-top:1px solid var(--border)}
.principle__title{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;letter-spacing:-0.025em;line-height:1.15;margin-bottom:var(--space-4)}
.principle__text{font-size:var(--fs-sm);line-height:1.65;color:var(--text-soft)}
@media(max-width:860px){.principles{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-9);padding:var(--space-9) 0;align-items:start}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr;gap:var(--space-7)}}

.contact-info{position:sticky;top:120px}
.contact-info__title{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:500;line-height:1;letter-spacing:-0.035em;margin-bottom:var(--space-6)}
.contact-info__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-5);margin-bottom:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border)}
.contact-info__item{display:flex;flex-direction:column;gap:var(--space-2)}
.contact-info__label{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}
.contact-info__value{font-size:var(--fs-lg);color:var(--text);font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em}
.contact-info__value a{transition:color var(--dur-fast) var(--ease)}
.contact-info__value a:hover{color:var(--text-soft)}
@media(max-width:960px){.contact-info{position:static}}

.form{display:flex;flex-direction:column;gap:var(--space-5)}
.form__group{display:flex;flex-direction:column;gap:var(--space-2);position:relative}
.form__label{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:500}
.form__input,.form__textarea,.form__select{
  background:transparent;border:0;
  border-bottom:1px solid var(--border-strong);
  padding:var(--space-3) 0;
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;
  color:var(--text);
  transition:border-color var(--dur-fast) var(--ease),padding var(--dur-fast) var(--ease);
  border-radius:0;
  letter-spacing:-0.02em;
}
.form__input:focus,.form__textarea:focus,.form__select:focus{outline:none;border-bottom-color:var(--text);padding-left:var(--space-2)}
.form__input::placeholder,.form__textarea::placeholder{color:var(--text-muted);opacity:1;font-weight:400}
.form__textarea{resize:vertical;min-height:120px;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;font-weight:400}
.form__select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0a0a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;cursor:pointer}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
.form__hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form__submit{margin-top:var(--space-5);align-self:flex-start}
.form__notice{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);margin-top:var(--space-3);font-weight:500}
.form__success,.form__error{padding:var(--space-5);border-radius:var(--radius);font-size:var(--fs-sm);line-height:1.5;display:none}
.form__success.is-visible,.form__error.is-visible{display:block}
.form__success{background:var(--accent);color:var(--text);border:1px solid var(--accent);font-weight:500}
.form__error{background:#fee;color:#c33;border:1px solid #f88}

/* ═══════════════════════════════════════════════════════════
   BLOG / INSIGHTS
   ═══════════════════════════════════════════════════════════ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7) var(--space-5);margin-top:var(--space-7)}
@media(max-width:960px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--border);transition:opacity var(--dur-fast) var(--ease)}
.post:hover{opacity:0.65}
.post__meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);font-weight:500}
.post__title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;line-height:1.2;letter-spacing:-0.025em}
.post__excerpt{font-size:var(--fs-sm);line-height:1.6;color:var(--text-soft)}
.post__more{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:0.12em;display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-weight:500}
.post__more::after{content:'→';transition:transform var(--dur-fast) var(--ease)}
.post:hover .post__more::after{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════
   SEO TOOL
   ═══════════════════════════════════════════════════════════ */
.seo-scan{
  background:var(--bg-dark);color:var(--text-on-dark);
  padding:var(--space-9);border-radius:var(--radius-lg);
  text-align:center;
  position:relative;overflow:hidden;
  margin-top:var(--space-9);
}
.seo-scan::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at 50% 100%,rgba(200,255,0,0.08),transparent 60%);pointer-events:none}
.seo-scan__inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.seo-scan h2{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:500;line-height:0.95;letter-spacing:-0.04em;margin-bottom:var(--space-5)}
.seo-scan h2 .accent{color:var(--accent)}
.seo-scan__sub{color:var(--text-on-dark-soft);margin-bottom:var(--space-7);font-size:var(--fs-base);line-height:1.55}
.seo-scan__form{display:flex;gap:var(--space-3);background:rgba(255,255,255,0.05);padding:var(--space-2);border-radius:100px;border:1px solid var(--border-dark)}
.seo-scan__form input{flex:1;background:transparent;border:0;padding:var(--space-3) var(--space-5);color:var(--text-on-dark);font-size:var(--fs-base)}
.seo-scan__form input::placeholder{color:var(--text-on-dark-soft)}
.seo-scan__form input:focus{outline:none}
.seo-scan__form button{padding:var(--space-3) var(--space-6)}
@media(max-width:560px){.seo-scan__form{flex-direction:column;border-radius:var(--radius)}.seo-scan__form input{padding:var(--space-4)}}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(30px);transition:opacity 0.6s var(--ease-out),transform 0.6s var(--ease-out)}
.reveal-stagger.is-visible>*{opacity:1;transform:translateY(0)}
.reveal-stagger.is-visible>*:nth-child(1){transition-delay:0.05s}
.reveal-stagger.is-visible>*:nth-child(2){transition-delay:0.1s}
.reveal-stagger.is-visible>*:nth-child(3){transition-delay:0.15s}
.reveal-stagger.is-visible>*:nth-child(4){transition-delay:0.2s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .reveal,.reveal-stagger>*{opacity:1 !important;transform:none !important}
  .hero__title .highlight::before{transform:scaleX(1) !important;transition:none !important}
}

/* ─── UTILITIES ──────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;padding:var(--space-3) var(--space-5);background:var(--text);color:var(--bg);z-index:9999;font-size:var(--fs-sm)}
.skip-link:focus{left:var(--space-4);top:var(--space-4)}
.no-js .reveal,.no-js .reveal-stagger>*{opacity:1;transform:none}