/* =========================================================================
   M. A. KADER — Founder / Full-Stack Engineer
   Shared design system · "Warm Editorial / Founder's Studio"
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Tokens ----------------------------------------------------------- */
:root{
  --paper:      #ffffff;   /* clean white background           */
  --paper-2:    #f4f1fd;   /* soft lavender-tinted panel       */
  --paper-3:    #ebe6fb;   /* card / inset                     */
  --ink:        #171338;   /* deep indigo-navy                 */
  --ink-soft:   #4d4a63;   /* muted body                       */
  --ink-faint:  #8b88a0;   /* captions, meta                   */
  --line:       #e9e6f4;   /* hairline rules                   */
  --line-strong:#d2cce8;
  --accent:     #5938e0;   /* Vivasoft indigo-violet           */
  --accent-deep:#4226c9;
  --accent-soft:#e6dffb;

  /* Vivasoft pastel accents */
  --mint:       #d4f1e2;
  --lavender:   #e6ddfb;
  --pink:       #fbd9e8;
  --periwinkle: #dce4fb;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ------------------------------------------------------------ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---- Layout ----------------------------------------------------------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:880px; margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }
.section{ padding-block:clamp(72px,11vw,150px); }
.section-sm{ padding-block:clamp(48px,7vw,90px); }
.rule{ height:1px; background:var(--line); border:0; }
.dark{ background:var(--ink); color:var(--paper); }
.dark .rule{ background:rgba(255,255,255,.14); }

/* ---- Typography ------------------------------------------------------- */
.serif{ font-family:var(--serif); }
.italic{ font-style:italic; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.02em;
  font-size:clamp(2.3rem, 7.4vw, 6.4rem);
  text-wrap:balance;
}
.h1{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.018em;
  font-size:clamp(2.3rem, 5.2vw, 4.4rem);
}
.h2{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.015em;
  font-size:clamp(1.9rem, 3.6vw, 3rem);
}
.h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.01em;
  font-size:clamp(1.35rem, 2.1vw, 1.85rem);
}
.lede{
  font-size:clamp(1.15rem, 1.7vw, 1.5rem);
  line-height:1.5;
  color:var(--ink-soft);
  font-weight:400;
  letter-spacing:-.005em;
  max-width:34ch;
}
.body-lg{ font-size:1.1rem; color:var(--ink-soft); line-height:1.65; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.accent-ink{ color:var(--accent); }
em.mark{ font-style:italic; color:var(--accent); }

/* eyebrow / mono label */
.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:1.7em; height:1px; background:currentColor; opacity:.6;
  display:inline-block;
}
.eyebrow.bare::before{ display:none; }
.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.idx{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--accent);
}

/* ---- Buttons / links -------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.96rem;
  letter-spacing:-.01em; white-space:nowrap;
  padding:.92em 1.5em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  border-radius:2px;
  cursor:pointer;
  transition:transform .35s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translate(3px,-1px); }
.btn-ghost{
  --bg:transparent; --fg:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-accent{ --bg:var(--accent); --fg:var(--paper); border-color:var(--accent); }
.dark .btn-ghost{ --fg:var(--paper); border-color:rgba(255,255,255,.28); }
.dark .btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.tlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.96rem; white-space:nowrap;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  transition:color .25s, border-color .25s, gap .3s var(--ease);
}
.tlink:hover{ color:var(--accent); border-color:var(--accent); gap:.85em; }

/* ---- Nav -------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-color:var(--line); }
.nav-in{
  max-width:var(--wrap); margin:0 auto; padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:.55em; font-family:var(--serif); }
.brand-av{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; border:1px solid var(--line); }
.brand-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand .mk{ font-size:1.32rem; font-weight:600; letter-spacing:-.02em; }
.brand .dot{ color:var(--accent); }
.brand .role{ font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
@media (max-width:1024px){ .brand .role{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav-links a{
  font-size:.93rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0;
  transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.wa-ico{ width:1.15em; height:1.15em; fill:currentColor; flex:0 0 auto; }
.nav-burger{
  display:none; width:42px; height:42px; flex:0 0 42px; padding:0; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:100px; background:var(--paper);
  align-items:center; justify-content:center; color:var(--ink);
}
.nav-burger span{ position:relative; width:17px; height:1.5px; background:currentColor; display:block; transition:transform .3s var(--ease), opacity .2s; }
.nav-burger span::before, .nav-burger span::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor; transition:transform .3s var(--ease); }
.nav-burger span::before{ top:-5px; } .nav-burger span::after{ top:5px; }
.nav.nav-open .nav-burger span{ background:transparent; }
.nav.nav-open .nav-burger span::before{ transform:translateY(5px) rotate(45deg); }
.nav.nav-open .nav-burger span::after{ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:860px){
  .nav-burger{ display:flex; }
  .nav-cta .btn-text{ display:none; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(23,19,56,.5);
    padding:8px var(--gut) 18px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .35s var(--ease), opacity .25s, visibility .25s;
  }
  .nav.nav-open .nav-links{ max-height:60vh; opacity:1; visibility:visible; }
  .nav-links a{ font-size:1.05rem; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-links a::after{ display:none; }
  .nav-links a:last-child{ border-bottom:0; }
}
@media (min-width:861px){ .nav-burger{ display:none; } }

/* ---- Footer ----------------------------------------------------------- */
.work-cta-panel{ position:relative; text-align:center; overflow:hidden;
  border-radius:22px; padding:clamp(48px,7vw,90px) clamp(24px,5vw,64px);
  background:radial-gradient(120% 140% at 15% 0%, #2f2769 0%, #1b1540 55%, #130f2e 100%);
  border:1px solid rgba(107,76,240,.3);
  box-shadow:0 40px 80px -40px rgba(58,47,176,.55); }
.work-cta-panel::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 85% 100%, rgba(107,76,240,.22) 0%, rgba(107,76,240,0) 70%); pointer-events:none; }
.work-cta-panel > *{ position:relative; }
.btn-on-dark{ border-color:rgba(255,255,255,.25); color:var(--paper); }
.btn-on-dark:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }

/* ---- Footer ----------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--paper); padding-block:clamp(64px,8vw,104px) 36px; }
.foot a{ color:rgba(255,255,255,.72); transition:color .2s; }
.foot a:hover{ color:var(--paper); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start; }
.foot-cta{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(2rem,4.4vw,3.4rem); }
.foot-cta a{ color:var(--paper); border-bottom:2px solid var(--accent); }
.foot-col h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:18px; font-weight:500; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.foot-col li{ font-size:.98rem; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:clamp(48px,6vw,80px); padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.5); flex-wrap:wrap; }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr; gap:40px; } }

/* ---- Section headers -------------------------------------------------- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,64px); }
.sec-head .h2{ max-width:18ch; }

/* ---- Generic responsive collapse -------------------------------------- */
@media (max-width:760px){
  .stack-md{ grid-template-columns:1fr !important; gap:clamp(28px,6vw,40px) !important; }
  .story-grid .eyebrow.bare{ position:static !important; top:auto !important; }
}

/* ---- Marquee ---------------------------------------------------------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:20px; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:scrollx 38s linear infinite; }
.marquee-track span{ font-family:var(--mono); font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding-inline:28px; display:inline-flex; align-items:center; gap:28px; }
.marquee-track span::after{ content:"✦"; color:var(--accent); font-size:.7em; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---- About band (who is Kader) ---------------------------------------- */
.about-band{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,84px); align-items:center; }
.about-band-media{ position:relative; display:flex; justify-content:center; }
.ab-ring{ width:100%; max-width:400px; aspect-ratio:1; border-radius:50%; padding:12px;
  background:linear-gradient(155deg,#6b4cf0 0%,#3a2fb0 100%);
  box-shadow:0 40px 80px -34px rgba(58,47,176,.55); }
.ab-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 26%; display:block; }
.ab-badge{ position:absolute; left:8%; bottom:6%; display:inline-flex; align-items:center; gap:9px;
  background:rgba(20,18,40,.82); backdrop-filter:blur(6px); color:#fff;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; padding:11px 16px; border-radius:100px;
  border:1px solid rgba(255,255,255,.14); }
.ab-dot{ width:9px; height:9px; border-radius:50%; background:#39d98a; box-shadow:0 0 0 3px rgba(57,217,138,.25); }
@media (max-width:820px){
  .about-band{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px); }
  .ab-ring{ max-width:300px; }
}

/* ---- Intro video panel ------------------------------------------------ */
.intro-video{ position:relative; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 130% at 20% 0%, #2a2360 0%, #171235 55%, #100c26 100%);
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s; }
.intro-video:hover{ transform:translateY(-3px); box-shadow:0 40px 80px -40px rgba(23,19,56,.6); }
.intro-video::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(107,76,240,.18) 0%, rgba(107,76,240,0) 70%); }
.iv-top{ position:absolute; z-index:2; top:clamp(18px,2.4vw,30px); left:clamp(18px,2.4vw,30px);
  display:flex; align-items:center; gap:13px; }
.iv-ava{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; border:1.5px solid rgba(255,255,255,.3); }
.iv-ava img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; }
.iv-meta b{ display:block; color:#fff; font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,1.6vw,1.35rem); }
.iv-meta span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.iv-play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(64px,7vw,88px); height:clamp(64px,7vw,88px); border-radius:50%;
  background:#e8482e; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px -12px rgba(232,72,46,.7); transition:transform .3s var(--ease); }
.intro-video:hover .iv-play{ transform:translate(-50%,-50%) scale(1.06); }
.iv-play::before{ content:""; margin-left:6px; border-style:solid;
  border-width:14px 0 14px 24px; border-color:transparent transparent transparent #fff; }

/* ---- Sticky consultancy widget ---------------------------------------- */
@keyframes consultIn{ from{ transform:translateY(24px) scale(.96); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes cPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,197,99,.5); } 70%{ box-shadow:0 0 0 8px rgba(37,197,99,0); } 100%{ box-shadow:0 0 0 0 rgba(37,197,99,0); } }
@keyframes cArrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

.consult-fab{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,28px); z-index:80;
  display:block; padding:11px;
  background:linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
  border:1px solid var(--line);
  border-radius:26px; color:var(--ink);
  box-shadow:0 24px 54px -20px rgba(58,47,176,.4), 0 2px 8px -2px rgba(23,19,56,.12);
  animation:consultIn .6s var(--ease) both .8s;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-radius .35s;
  max-width:min(92vw,380px);
}
.consult-fab::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(107,76,240,.5), rgba(107,76,240,0) 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; pointer-events:none; }
.consult-fab:hover{ transform:translateY(-4px); box-shadow:0 34px 70px -22px rgba(58,47,176,.5), 0 3px 10px -2px rgba(23,19,56,.14); }
.consult-fab:hover::before{ opacity:1; }
.consult-fab.is-hidden{ transform:translateY(170%) scale(.9); opacity:0; pointer-events:none; }

.consult-head{ display:flex; align-items:center; gap:15px; text-decoration:none; color:inherit; padding:2px 8px 2px 2px; }
.consult-av{ position:relative; width:54px; height:54px; flex:none; border-radius:50%;
  padding:2.5px; background:conic-gradient(from 140deg, #39d98a, #6b4cf0, #39d98a); }
.consult-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; display:block; background:var(--paper-2); border:2px solid var(--paper); box-sizing:border-box; }
.consult-av .cdot{ position:absolute; right:1px; bottom:1px; width:13px; height:13px; border-radius:50%;
  background:#25c563; border:2.5px solid var(--paper); animation:cPulse 2.2s ease-out infinite; }
.consult-body{ display:flex; flex-direction:column; gap:3px; padding-right:4px; }
.consult-eye{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#1f9d57; display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.consult-eye::before{ content:""; width:6px; height:6px; border-radius:50%; background:#25c563; }
.consult-txt{ font-family:var(--serif); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.12; letter-spacing:-.015em; }

/* hover-expanding drawer */
.consult-drawer{ max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease), opacity .3s var(--ease); }
.consult-fab:hover .consult-drawer{ max-height:90px; opacity:1; }
.consult-drawer-in{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 8px 5px; margin-top:12px; border-top:1px solid var(--line); }
.consult-book{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--accent); }
.consult-book .cb-arw{ transition:transform .3s var(--ease); }
.consult-book:hover .cb-arw{ transform:translateX(4px); }
.consult-brand{ display:inline-flex; align-items:center; gap:6px; }
.cal-mark{ width:20px; height:20px; }
.cal-word{ font-weight:700; font-size:1rem; color:#006BFF; letter-spacing:-.01em; }

.consult-x{ position:absolute; top:-7px; right:-7px; width:24px; height:24px; padding:0; cursor:pointer; z-index:2;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-faint); font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:0 4px 12px -3px rgba(23,19,56,.25);
  transition:background .2s,color .2s,transform .2s; }
.consult-x:hover{ background:var(--ink); color:var(--paper); transform:scale(1.1); }
@media (max-width:480px){
  .consult-head{ gap:12px; }
  .consult-av{ width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce){
  .consult-fab{ animation:none; } .consult-av .cdot{ animation:none; }
}
@media print{ .consult-fab{ display:none; } }

/* ---- The way I work band (portrait + CTA) ----------------------------- */.work-band{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(36px,6vw,84px); align-items:center; }
.work-band-media{ display:flex; justify-content:center; order:2; }
.work-band-media img{ width:100%; max-width:300px; aspect-ratio:1/1; object-fit:cover; object-position:50% 30%; height:auto; border-radius:10px; border:1px solid var(--line); box-shadow:0 34px 70px -34px rgba(23,19,56,.5); }
.work-band-copy .h2{ max-width:20ch; }
@media (max-width:820px){
  .work-band{ grid-template-columns:1fr; gap:clamp(30px,6vw,44px); text-align:center; }
  .work-band-media{ order:-1; }
  .work-band-copy .h2{ max-width:none; }
  .work-band-media img{ max-width:280px; }
  .work-band-copy .btn-accent{ margin-inline:auto; }
}

/* ---- Service list (editorial rows) ------------------------------------ */.svc-list{ border-top:1px solid var(--line); }
.svc-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,60px);
  align-items:center;
  padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line);
  transition:background .3s, padding-left .4s var(--ease);
  position:relative;
}
.svc-row:hover{ padding-left:18px; }
.svc-row .num{ font-family:var(--mono); font-size:.82rem; color:var(--accent); padding-top:.5em; }
.svc-row .svc-name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.06; letter-spacing:-.01em; }
.svc-row .svc-desc{ color:var(--ink-soft); font-size:1rem; max-width:46ch; margin-top:8px; }
.svc-row .svc-go{ font-family:var(--mono); font-size:1.3rem; color:var(--ink-faint); transition:transform .4s var(--ease), color .25s; }
.svc-row:hover .svc-go{ color:var(--accent); transform:translateX(6px); }
@media (max-width:720px){
  .svc-row{ grid-template-columns:auto 1fr; }
  .svc-row .svc-go{ display:none; }
}

/* ---- Services two-column with sticky visual --------------------------- */
.svc-layout{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(32px,5vw,72px); align-items:start; }
.svc-media{ position:sticky; top:96px; }
.svc-media img{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); box-shadow:0 30px 64px -34px rgba(23,19,56,.5); }
@media (max-width:900px){
  .svc-layout{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
  .svc-media{ position:static; order:-1; }
  .svc-media img{ aspect-ratio:16/10; object-fit:cover; object-position:50% 0; }
}

/* ---- Work / case cards ------------------------------------------------ */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); }
.work-card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(26px,2.6vw,38px);
  display:flex; flex-direction:column;
  min-height:340px;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
.work-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(26,23,20,.4); border-color:var(--line-strong); }
.work-thumb{ margin:calc(clamp(26px,2.6vw,38px) * -1) calc(clamp(26px,2.6vw,38px) * -1) 0; border-bottom:1px solid rgba(255,255,255,.1); overflow:hidden; background:rgba(255,255,255,.04); }
.work-thumb img{ display:block; width:100%; height:auto; aspect-ratio:1544/500; object-fit:cover; transition:transform .5s var(--ease); }
.work-card:hover .work-thumb img{ transform:scale(1.03); }
.work-card .tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-top:24px; }
.work-card h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.08; letter-spacing:-.012em; margin-top:14px; }
.work-card p{ color:var(--ink-soft); margin-top:12px; font-size:1rem; }
.work-card .metrics{ margin-top:auto; padding-top:26px; display:flex; gap:30px; border-top:1px solid var(--line); }
.work-card .metrics .m b{ font-family:var(--serif); font-size:1.7rem; font-weight:500; display:block; line-height:1; letter-spacing:-.01em; }
.work-card .metrics .m span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:720px){ .work-grid{ grid-template-columns:1fr; } }

/* ---- Stat row --------------------------------------------------------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.stat-row .stat{ background:var(--paper); padding:clamp(26px,3vw,42px) clamp(16px,2vw,28px); }
.dark .stat-row{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.14); }
.dark .stat-row .stat{ background:var(--ink); }
.stat .n{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.stat .n .u{ color:var(--accent); }
.stat .l{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px; }
@media (max-width:760px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }

/* ---- Hero two-column with side stats ---------------------------------- */
.hero-2col{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(36px,5vw,72px); align-items:end; }
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:linear-gradient(150deg,#2a2360 0%,#171235 100%);
  border:1px solid rgba(107,76,240,.28); border-radius:16px; overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(58,47,176,.5); }
.hero-stats .stat{ position:relative; background:transparent; padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);
  transition:background .3s var(--ease); overflow:hidden; }
.hero-stats .stat::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 100% 0%, rgba(107,76,240,.22) 0%, rgba(107,76,240,0) 55%);
  opacity:0; transition:opacity .35s var(--ease); }
.hero-stats .stat:hover{ background:rgba(255,255,255,.03); }
.hero-stats .stat:hover::before{ opacity:1; }
.hero-stats .stat .n{ position:relative; font-size:clamp(2rem,3.2vw,2.9rem); color:#fff; }
.hero-stats .stat .n .u{ color:#a894ff; }
.hero-stats .stat .l{ position:relative; color:rgba(255,255,255,.52); }
.hero-stats .stat::after{ content:""; position:absolute; left:clamp(18px,2vw,26px); bottom:clamp(20px,2.2vw,28px);
  width:22px; height:2px; background:var(--accent); border-radius:2px; opacity:0;
  transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.hero-stats .stat:hover::after{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .hero-2col{ grid-template-columns:1fr; align-items:start; gap:clamp(32px,5vw,48px); }
}
@media (max-width:420px){
  .hero-stats{ grid-template-columns:1fr; }
}

/* ---- Concept switcher (review only) ----------------------------------- */
.concept-switch{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:80; display:flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--paper);
  padding:7px 9px 7px 16px; border-radius:100px;
  box-shadow:0 14px 40px -12px rgba(26,23,20,.55);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
.concept-switch .lbl{ color:rgba(255,255,255,.5); padding-right:4px; }
.concept-switch a{
  width:26px; height:26px; border-radius:100px; display:grid; place-items:center;
  color:rgba(255,255,255,.6); transition:background .2s,color .2s;
}
.concept-switch a:hover{ color:var(--paper); }
.concept-switch a.active{ background:var(--accent); color:var(--paper); }

/* ---- Reveal (content visible by default; no hide-then-show) ----------- */
.reveal{ opacity:1; }

/* ---- Page hero (inner pages) ------------------------------------------ */
.page-hero{ padding-block:clamp(60px,9vw,120px) clamp(40px,6vw,72px); }
.page-hero .h1{ max-width:16ch; margin-top:22px; }
.page-hero .lede{ margin-top:26px; max-width:52ch; }

/* ---- Work hero: copy + impact panel ---------------------------------- */
.work-hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,6vw,80px); align-items:center; }
.work-hero-copy .h1{ max-width:none; }
.work-hero-copy .lede{ margin-top:26px; max-width:46ch; }
.work-impact{ border:1px solid var(--line); border-radius:14px; padding:clamp(24px,2.6vw,38px); background:var(--paper-2); }
.work-impact .eyebrow{ margin-bottom:4px; color:var(--accent); }
.work-impact ul{ list-style:none; }
.work-impact li{ display:flex; flex-direction:column; gap:7px; padding:clamp(16px,1.8vw,22px) 0; border-bottom:1px solid var(--line); }
.work-impact li:first-of-type{ padding-top:16px; }
.work-impact li:last-child{ border-bottom:0; padding-bottom:0; }
.work-impact b{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3vw,2.7rem); line-height:1; letter-spacing:-.02em; }
.work-impact b .u{ color:var(--accent); }
.work-impact span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:860px){ .work-hero{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); align-items:start; } }

/* ---- Services hero: copy + jump index -------------------------------- */
.svc-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,80px); align-items:center; }
.svc-hero-copy .lede{ max-width:44ch; }
.svc-index{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.svc-index a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1em;
  padding:1.05em .2em; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; transition:padding-left .25s ease, color .2s ease;
}
.svc-index a:hover{ padding-left:.7em; color:var(--accent); }
.svc-index .si-n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--accent); }
.svc-index .si-t{ font-family:var(--serif); font-size:1.08rem; font-weight:500; letter-spacing:-.01em; }
.svc-index .si-a{ font-family:var(--mono); opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .25s ease; }
.svc-index a:hover .si-a{ opacity:1; transform:translateX(0); }
@media (max-width:820px){
  .svc-hero{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); align-items:start; }
}

/* ---- About hero (text + portrait) ------------------------------------- */
.about-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about-hero-copy .lede{ max-width:42ch; }
.cv-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.cv-ico{ width:1.15em; height:1.15em; flex:none; }
.about-hero-img{ position:relative; margin:0; }
.about-hero-img img{
  width:100%; aspect-ratio:4/3.1; object-fit:cover; object-position:50% 22%;
  border:1px solid var(--line); border-radius:4px;
  box-shadow:0 30px 64px -34px rgba(23,19,56,.45);
}
.about-hero-img figcaption{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:14px; display:flex; align-items:center; gap:.7em;
}
.about-hero-img figcaption::before{ content:""; width:1.6em; height:1px; background:var(--accent); opacity:.7; }
@media (max-width:820px){
  .about-hero{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
  .about-hero-img img{ aspect-ratio:16/10; object-position:50% 24%; }
}

/* utilities */
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }
.flex{ display:flex; } .gap-s{ gap:12px; } .gap-m{ gap:20px; }
.wrap-flex{ flex-wrap:wrap; } .items-c{ align-items:center; }

/* ---- Home hero responsiveness ----------------------------------------- */
@media (max-width:720px){
  .hero-grid{ grid-template-columns:1fr !important; gap:28px !important; align-items:start !important; }
  .hero-grid .flex.wrap-flex{ justify-content:flex-start !important; }
  .hero-grid .btn-accent{ width:100%; justify-content:center; }
  .display br{ display:none; }
}
.maxw-prose{ max-width:62ch; }

/* ---- Chips / tags ----------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--line-strong); border-radius:100px; padding:7px 15px; background:var(--paper); }
.dark .chip{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2); background:transparent; }

/* ---- Value cards (Vivasoft pastel tiles) ------------------------------ */
.val-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.val{ background:var(--paper); padding:clamp(28px,3vw,40px); border-radius:16px; }
.val:nth-child(3n+1){ background:var(--mint); }
.val:nth-child(3n+2){ background:var(--lavender); }
.val:nth-child(3n+3){ background:var(--pink); }
.val .vn{ font-family:var(--mono); font-size:.74rem; color:var(--accent); letter-spacing:.1em; }
.val h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; letter-spacing:-.01em; margin-top:18px; }
.val p{ color:var(--ink-soft); margin-top:12px; font-size:1rem; }
@media (max-width:820px){ .val-grid{ grid-template-columns:1fr; } }

/* ---- Client reviews (Vivasoft pastel testimonial tiles) --------------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review{ border-radius:16px; padding:clamp(26px,2.6vw,34px); display:flex; flex-direction:column; }
.review:nth-child(3n+1){ background:var(--mint); }
.review:nth-child(3n+2){ background:var(--lavender); }
.review:nth-child(3n+3){ background:var(--pink); }
.review .stars{ color:#f5b800; letter-spacing:.18em; font-size:.9rem; }
.review blockquote{ font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,1.5vw,1.35rem); line-height:1.36; letter-spacing:-.01em; margin-top:18px; color:var(--ink); }
.review .who{ margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:13px; }
.review .who .av{ width:42px; height:42px; border-radius:100px; background:var(--paper); display:grid; place-items:center; font-family:var(--serif); font-size:1.05rem; color:var(--accent); flex:none; }
.review .who b{ display:block; font-weight:600; font-size:.97rem; line-height:1.2; }
.review .who .av img{ width:100%; height:100%; border-radius:100px; object-fit:cover; }
.review .who .av-logo{ overflow:hidden; }
.review .who .av-logo img{ object-fit:contain; padding:5px; }
.review .who span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:820px){ .review-grid{ grid-template-columns:1fr; } }

/* ---- Timeline --------------------------------------------------------- */
.timeline{ border-top:1px solid var(--line); }
.tl-row{ display:grid; grid-template-columns:160px 1fr; gap:clamp(16px,3vw,48px);
  padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); }
.tl-row .yr{ font-family:var(--mono); font-size:.82rem; color:var(--accent); letter-spacing:.06em; padding-top:.4em; }
.tl-row h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.35rem,2vw,1.7rem); letter-spacing:-.01em; }
.tl-row .role-org{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
.tl-row p{ color:var(--ink-soft); margin-top:14px; max-width:60ch; }
@media (max-width:640px){ .tl-row{ grid-template-columns:1fr; gap:6px; } }

/* ---- Process steps ---------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,30px); }
.step{ position:relative; padding-top:30px; border-top:2px solid var(--ink); }
.step .sn{ font-family:var(--mono); font-size:.74rem; color:var(--accent); letter-spacing:.1em; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:1.4rem; letter-spacing:-.01em; margin-top:14px; }
.step p{ color:var(--ink-soft); margin-top:10px; font-size:.97rem; }
.dark .step{ border-color:var(--accent); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ---- Service detail blocks -------------------------------------------- */
.svc-detail{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,72px);
  padding:clamp(40px,6vw,84px) 0; border-top:1px solid var(--line); align-items:start; }
.svc-detail:last-child{ border-bottom:1px solid var(--line); }
.svc-detail .sd-num{ font-family:var(--mono); font-size:.82rem; color:var(--accent); letter-spacing:.1em; }
.svc-detail h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem);
  line-height:1.03; letter-spacing:-.015em; margin-top:18px; }
.svc-detail .sd-tagline{ color:var(--ink-soft); margin-top:20px; font-size:1.1rem; max-width:34ch; }
.svc-detail ul{ list-style:none; display:grid; gap:0; }
.svc-detail li{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0;
  border-top:1px solid var(--line); align-items:baseline; }
.svc-detail li:first-child{ border-top:0; }
.svc-detail li .li-k{ font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.svc-detail li .li-v{ color:var(--ink); font-weight:500; }
.svc-detail li .li-v span{ display:block; color:var(--ink-soft); font-weight:400; font-size:.96rem; margin-top:4px; }
@media (max-width:760px){ .svc-detail{ grid-template-columns:1fr; gap:28px; } }

/* ---- Case study (work page) ------------------------------------------- */
.case{ border-top:1px solid var(--line); padding:clamp(40px,5.5vw,80px) 0; }
.case-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px); align-items:start; }
.case .cn{ font-family:var(--serif); font-style:italic; font-size:clamp(2rem,4vw,3.2rem); color:var(--accent); line-height:1; }
.case .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.case h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.04; letter-spacing:-.015em; margin-top:14px; max-width:20ch; }
.case .case-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:34px; }
.case .cb h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.case .cb p{ color:var(--ink-soft); font-size:1rem; }
.case .case-metrics{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,72px); margin-top:36px; padding-top:30px; border-top:1px solid var(--line); }
.case .case-metrics .m b{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.6vw,3rem); display:block; line-height:1; letter-spacing:-.02em; }
.case .case-metrics .m b .u{ color:var(--accent); }
.case .case-metrics .m span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; display:block; }
@media (max-width:760px){ .case-head{ grid-template-columns:1fr; gap:10px; } .case .case-body{ grid-template-columns:1fr; gap:26px; } }

.case-visit{ display:inline-flex; align-items:center; gap:.4em; margin-top:16px; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid transparent; transition:border-color .2s; }
.case-visit:hover{ border-color:var(--accent); }
.case-media{ display:block; margin-top:32px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper-2); }
.case-media img{ display:block; width:100%; height:auto; aspect-ratio:1544/500; object-fit:cover; transition:transform .5s var(--ease); }
.case-media:hover img{ transform:scale(1.02); }
@media (max-width:760px){ .case-media img{ aspect-ratio:16/9; } }

.case-cover{ display:flex; flex-direction:column; justify-content:center; gap:14px; margin-top:32px; border:1px solid var(--line); border-radius:6px; padding:clamp(34px,5vw,64px); min-height:clamp(200px,26vw,320px); position:relative; overflow:hidden; }
.case-cover .cover-kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.case-cover .cover-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:1.05; letter-spacing:-.015em; }
.case-cover.cover-a{ background:linear-gradient(135deg,#1f1b47 0%,#332a72 100%); color:var(--paper); border-color:transparent; }
.case-cover.cover-b{ background:linear-gradient(135deg,#efe9dd 0%,#e3dcf3 100%); color:#231d47; }
.case-cover.cover-a .cover-title,.case-cover.cover-b .cover-title{ color:inherit; }
.case-media.media-contain{ background:#fff; }
.case-media.media-contain img{ object-fit:contain; aspect-ratio:1544/500; padding:clamp(28px,5vw,72px); }
.case-media.media-shot img{ aspect-ratio:16/9; }

/* ---- Contact channels ------------------------------------------------- */
.channels{ border-top:1px solid var(--line); }
.channel{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,40px); align-items:center;
  padding:clamp(22px,2.8vw,34px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease); }
.channel:hover{ padding-left:16px; }
.channel .ch-k{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); width:120px; }
.channel .ch-v{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.9rem); font-weight:500; letter-spacing:-.01em; }
.channel .ch-go{ font-family:var(--mono); color:var(--ink-faint); transition:transform .4s var(--ease), color .25s; }
.channel:hover .ch-go{ color:var(--accent); transform:translateX(6px); }
@media (max-width:600px){ .channel{ grid-template-columns:1fr auto; } .channel .ch-k{ display:none; } }

/* ---- Cal.com embed frame ---------------------------------------------- */
.cal-embed{
  border:1px solid var(--line); background:var(--paper-2);
  border-radius:5px; padding:clamp(8px,1vw,16px);
  min-height:680px; overflow:hidden;
}
.cal-embed #my-cal-inline{
  width:100%; min-height:660px; height:100%;
  background:var(--paper); border-radius:3px; overflow:hidden;
}

/* ---- Reviews (single card, auto-rotating) ----------------------------- */
.rev-single{ min-width:0; }
.rev-card{
  box-sizing:border-box;
  border-radius:18px;
  padding:clamp(28px,3vw,38px);
  display:flex; flex-direction:column;
  min-height:380px;
  transition:opacity .38s ease, transform .38s ease, background-color .38s ease;
}
.rev-card.is-out{ opacity:0; transform:translateY(8px); }
.rev-mint { background:#cdeccf; }
.rev-lilac{ background:#dcd9f6; }
.rev-blush{ background:#f6d6dd; }
.rev-stars{ color:#f5b800; font-size:1.05rem; letter-spacing:.18em; }
.rev-ava{ overflow:hidden; }
.rev-quote{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.42;
  color:var(--ink); margin-top:22px; text-wrap:pretty;
  flex:1 1 auto;
}
.rev-who{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.rev-ava{
  width:48px; height:48px; flex:0 0 48px; border-radius:100px;
  background:var(--paper); color:var(--accent);
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.rev-name{ font-weight:700; font-size:1rem; color:var(--ink); }
.rev-role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
@media (prefers-reduced-motion:reduce){ .rev-card{ transition:none; } }

/* ---- Form ------------------------------------------------------------- */.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.field input, .field textarea, .field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:2px;
  padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ---- Index list (Direction B) ----------------------------------------- */
.index-list{ border-top:1px solid var(--ink); }
.index-row{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--line); transition:color .25s; }
.index-row .ir-n{ font-family:var(--mono); font-size:.8rem; color:var(--accent); }
.index-row .ir-t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.01em; }
.index-row .ir-m{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }
.index-row:hover .ir-t{ color:var(--accent); }
@media (max-width:600px){ .index-row{ grid-template-columns:auto 1fr; } .index-row .ir-m{ display:none; } }

/* ---- Masthead (Direction B) ------------------------------------------- */
.masthead{ font-family:var(--serif); font-weight:500; line-height:.9; letter-spacing:-.03em;
  font-size:clamp(2.6rem,11vw,9.5rem); text-align:center; }
.mast-meta{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:14px 0; margin-top:28px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- Ledger (Direction C) --------------------------------------------- */
.ledger{ border:1px solid var(--line); background:var(--paper-2); }
.ledger-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:20px clamp(20px,2.4vw,30px); border-bottom:1px solid var(--line); }
.ledger-row:last-child{ border-bottom:0; }
.ledger-row .lr-k{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.ledger-row .lr-v{ font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,2rem); font-weight:500; letter-spacing:-.02em; white-space:nowrap; }
.ledger-row .lr-v .u{ color:var(--accent); }
.svc-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc-cards .sc{ background:var(--paper); padding:clamp(28px,3.2vw,46px); min-height:200px; display:flex; flex-direction:column; transition:background .3s; }
.svc-cards .sc:hover{ background:var(--paper-2); }
.svc-cards .sc .scn{ font-family:var(--mono); font-size:.76rem; color:var(--accent); letter-spacing:.1em; }
.svc-cards .sc h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.012em; margin-top:16px; }
.svc-cards .sc p{ color:var(--ink-soft); margin-top:12px; font-size:1rem; }
.svc-cards .sc .scgo{ margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:.78rem; color:var(--accent); }
@media (max-width:700px){ .svc-cards{ grid-template-columns:1fr; } }

/* ---- Case study DETAIL page ------------------------------------------- */
.cs-back{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); transition:color .2s, gap .25s var(--ease); }
.cs-back:hover{ color:var(--accent); gap:.8em; }
.cs-back .a{ transition:transform .25s var(--ease); }
.cs-back:hover .a{ transform:translateX(-3px); }
.cs-hero .h1{ max-width:20ch; margin-top:20px; }
.cs-hero .lede{ margin-top:24px; max-width:56ch; }
.cs-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cs-tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:100px; padding:.55em 1.1em; }
.cs-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* stat band */
.cs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:clamp(40px,6vw,72px); }
.cs-stats .s{ background:var(--paper); padding:clamp(26px,3.4vw,44px); }
.cs-stats .s b{ font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4vw,3.2rem); display:block; line-height:1; letter-spacing:-.02em; }
.cs-stats .s b .u{ color:var(--accent); }
.cs-stats .s span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px; display:block; }
@media (max-width:680px){ .cs-stats{ grid-template-columns:1fr; } }

/* overview 3-up */
.cs-overview{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,52px); }
.cs-overview .cb h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.cs-overview .cb p{ color:var(--ink-soft); font-size:1.02rem; }
@media (max-width:760px){ .cs-overview{ grid-template-columns:1fr; gap:26px; } }

/* modules */
.mod-intro{ max-width:34ch; }
.mod{ padding-top:clamp(52px,7vw,96px); }
.mod-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,40px); align-items:baseline; }
.mod-head .mn{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--accent); padding-top:.4em; }
.mod-head h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.08; letter-spacing:-.015em; }
.mod-head p{ color:var(--ink-soft); margin-top:14px; max-width:64ch; font-size:1.02rem; }
.mod-caps{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.mod-caps li{ list-style:none; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:100px; padding:.5em 1em; }
.mod-shot{ margin-top:clamp(26px,3.6vw,44px); }
.mod-head + .mod-shot{ margin-top:clamp(28px,4vw,48px); }

/* browser-ish window frame */
.winframe{ border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 30px 70px -40px rgba(23,19,56,.4); }
.winframe .wf-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.winframe .wf-bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-strong); }
.winframe .wf-bar i:nth-child(1){ background:#f0654b; } .winframe .wf-bar i:nth-child(2){ background:#f4bd4f; } .winframe .wf-bar i:nth-child(3){ background:#4fbf6b; }
.winframe .wf-url{ margin-left:12px; font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); letter-spacing:.03em; }
.winframe img{ display:block; width:100%; height:auto; }

/* next-case footer strip */
.cs-next{ border-top:1px solid var(--line); }
.cs-next a{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(30px,4vw,52px) 0; transition:padding-left .4s var(--ease); }
.cs-next a:hover{ padding-left:14px; }
.cs-next .nx-k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.cs-next .nx-t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,2.6vw,2.2rem); letter-spacing:-.015em; margin-top:10px; }
.cs-next .nx-a{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,3vw,2.4rem); color:var(--accent); transition:transform .3s var(--ease); }
.cs-next a:hover .nx-a{ transform:translateX(6px); }