/* ==================================================================
   FOLD Research — public site styles
   Palette: deep aubergine ground, violet brand, brass for data
================================================================== */

:root{
  --ink:#0E0320;
  --plum:#1C0736;
  --plum-2:#250B47;
  --plum-3:#301059;
  --violet:#7B4DFF;
  --violet-soft:#9B78FF;
  --lilac:#C6B2FF;
  --chalk:#F2EDFC;
  --muted:#A08FC4;
  --brass:#E0A94A;
  --line:rgba(198,178,255,.16);
  --line-strong:rgba(198,178,255,.32);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--plum);
  color:var(--chalk);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{background:var(--violet);color:#fff}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--brass);color:#1a0a00;padding:10px 16px;border-radius:8px}

/* ---------------- type ---------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.015em;margin:0 0 .4em}
h1{font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4.1vw,3rem);line-height:1.08}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2}
p{margin:0 0 1.1em}
em{font-style:italic;color:var(--lilac)}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lilac);opacity:.85;
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}

.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.brass{color:var(--brass)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:.94rem;font-weight:500;
  padding:14px 24px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--violet);color:#fff}
.btn-solid:hover{background:var(--violet-soft)}
.btn-ghost{border-color:var(--line-strong);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--lilac);background:rgba(198,178,255,.07)}
.btn-brass{background:var(--brass);color:#20130a;font-weight:600}
.btn-brass:hover{background:#efbc63}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.arrow{transition:transform .18s ease}
.btn:hover .arrow,.link-more:hover .arrow{transform:translateX(4px)}

.link-more{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lilac);display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line-strong);padding-bottom:4px;
}
.link-more:hover{color:var(--chalk);border-color:var(--lilac)}

/* ---------------- header ---------------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(28,7,54,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-size:1.4rem;letter-spacing:.01em}
.brand span{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:.93rem;color:var(--muted);transition:color .16s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--chalk)}
.nav .btn{padding:10px 20px;font-size:.88rem}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:19px;height:1.5px;background:var(--chalk);margin:4px 0}

@media (max-width:900px){
  .burger{display:block}
  .nav{
    position:absolute;top:74px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--plum-2);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 24px;display:none;
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:18px;border-bottom:0;justify-content:center}
}

/* ---------------- sections ---------------- */
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section-tight{padding:clamp(48px,6vw,80px) 0}
.section-head{max-width:66ch;margin-bottom:clamp(36px,5vw,60px)}
.bg-deep{background:var(--ink)}
.bg-raised{background:var(--plum-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- hero + the fold (signature) ---------------- */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(56px,8vw,96px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:80%;
  background:radial-gradient(48% 60% at 22% 30%,rgba(123,77,255,.30),transparent 70%),
             radial-gradient(38% 52% at 82% 12%,rgba(224,169,74,.12),transparent 72%);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero h1 em{font-style:italic;color:var(--lilac)}
.hero .lede{margin-top:6px}

.client-strip{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.client-strip p{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;line-height:2.1}

/* the fold panel */
.fold{
  background:linear-gradient(180deg,var(--plum-3),var(--plum-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.fold-cap{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.fold-cap b{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400}
.fold-row{
  display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid transparent;margin-bottom:9px;
}
.fold-row .rank{font-family:var(--mono);font-size:.74rem;color:var(--muted);width:22px;flex:none}
.fold-row .name{font-size:.9rem;color:var(--chalk)}
.fold-row .tag{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fold-row.you{background:rgba(123,77,255,.20);border-color:rgba(198,178,255,.35)}
.fold-row.you .name{color:#fff;font-weight:600}
.fold-row.you .tag{color:var(--brass)}
.fold-row.dim{opacity:.34}
.fold-line{
  display:flex;align-items:center;gap:12px;margin:16px 0 14px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
}
.fold-line::before,.fold-line::after{content:"";height:1px;flex:1;background:repeating-linear-gradient(90deg,var(--brass) 0 5px,transparent 5px 11px);opacity:.6}
.fold-note{font-size:.82rem;color:var(--muted);margin:16px 0 0;line-height:1.5}

/* load animation for the signature row */
@media (prefers-reduced-motion:no-preference){
  .fold-row.you{animation:rise .9s cubic-bezier(.22,1,.36,1) .35s both}
  @keyframes rise{
    from{opacity:0;transform:translateY(64px)}
    to{opacity:1;transform:none}
  }
}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ---------------- stat band ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--ink);padding:32px 26px}
.stat b{display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--brass)}
.stat span{display:block;margin-top:10px;font-size:.86rem;color:var(--muted);line-height:1.45}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------------- generic grids + cards ---------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--plum-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:border-color .2s ease,transform .2s ease,background .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.bg-raised .card{background:var(--plum-3)}
.card h3{margin-bottom:.5em}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:1em}
.card .link-more{margin-top:auto;align-self:flex-start}

.card-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--brass);display:block;margin-bottom:16px}

.tick{list-style:none;padding:0;margin:0}
.tick li{position:relative;padding-left:22px;font-size:.93rem;color:var(--muted);margin-bottom:9px}
.tick li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--brass)}

/* ---------------- service rows ---------------- */
.srow{display:grid;grid-template-columns:.34fr .66fr;gap:clamp(20px,4vw,56px);padding:clamp(34px,4vw,52px) 0;border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow-title h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:0}
.srow-title .card-num{margin-bottom:12px}
@media (max-width:820px){.srow{grid-template-columns:1fr;gap:18px}}

/* ---------------- case study cards ---------------- */
.case{
  background:var(--plum-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease;
}
.case:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.case-top{padding:26px 26px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pill{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;border:1px solid var(--line-strong);color:var(--lilac);white-space:nowrap;
}
.case-body{padding:16px 26px 26px;display:flex;flex-direction:column;flex:1}
.case-body h3{font-size:1.35rem}
.case-body p{color:var(--muted);font-size:.94rem}
.case-metrics{display:flex;flex-wrap:wrap;gap:22px;margin:20px 0 24px;padding-top:20px;border-top:1px solid var(--line)}
.case-metrics div{min-width:84px}
.case-metrics b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--brass);line-height:1}
.case-metrics span{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:7px}

/* ---------------- insight cards ---------------- */
.post{display:flex;flex-direction:column;background:var(--plum-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.post:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.post-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--plum-3),var(--violet));overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover}
.post-in{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;gap:12px;flex-wrap:wrap}
.post-meta .cat{color:var(--brass)}
.post h3{font-size:1.2rem;line-height:1.28}
.post p{font-size:.92rem;color:var(--muted);margin-bottom:16px}
.post .link-more{margin-top:auto;align-self:flex-start}

/* ---------------- article ---------------- */
.article{max-width:74ch;margin:0 auto}
.article-head{max-width:74ch;margin:0 auto clamp(28px,4vw,44px)}
.article-body{font-size:1.06rem;line-height:1.78}
.article-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:1.9em 0 .5em}
.article-body h3{font-size:1.25rem;margin:1.6em 0 .4em}
.article-body ul,.article-body ol{padding-left:1.2em;color:var(--chalk)}
.article-body li{margin-bottom:.5em}
.article-body a{color:var(--lilac);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid var(--brass);
  font-family:var(--display);font-size:1.25rem;font-style:italic;color:var(--lilac);
}
.article-body img{border-radius:var(--radius);margin:1.6em 0}
.article-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.article-body th{background:var(--plum-3);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.article-cover{border-radius:var(--radius);margin-bottom:36px;max-height:460px;width:100%;object-fit:cover}

/* ---------------- forms ---------------- */
.form{display:grid;gap:18px}
.field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);
  border-radius:10px;padding:13px 15px;color:var(--chalk);font-family:var(--body);font-size:.98rem;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lilac);background:rgba(255,255,255,.08)}
.field select option{background:var(--plum-2);color:var(--chalk)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.f2{grid-template-columns:1fr}}

.notice{padding:15px 18px;border-radius:10px;font-size:.93rem;border:1px solid}
.notice.ok{background:rgba(90,200,150,.12);border-color:rgba(90,200,150,.45);color:#bff0d8}
.notice.err{background:rgba(255,110,110,.12);border-color:rgba(255,110,110,.45);color:#ffc9c9}

/* ---------------- contact panel ---------------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-line{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-line b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:6px}
.contact-line a,.contact-line span{font-family:var(--display);font-size:1.25rem;color:var(--chalk)}
.contact-line a:hover{color:var(--brass)}

/* ---------------- CTA band ---------------- */
.cta{
  background:linear-gradient(120deg,var(--plum-3),var(--violet) 130%);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.25fr .75fr;
  gap:32px;align-items:center;
}
.cta h2{margin-bottom:.25em}
.cta p{color:rgba(242,237,252,.78);margin:0;max-width:46ch}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta-actions .btn{justify-content:center}
@media (max-width:820px){.cta{grid-template-columns:1fr}}

/* ---------------- footer ---------------- */
.site-foot{background:var(--ink);border-top:1px solid var(--line);padding:64px 0 34px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;font-weight:400}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:10px}
.foot-grid a{font-size:.92rem;color:var(--muted)}
.foot-grid a:hover{color:var(--chalk)}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}

.sub-form{display:flex;gap:10px;margin-top:16px;max-width:400px}
.sub-form input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);border-radius:100px;padding:12px 18px;color:var(--chalk);font-family:var(--body);font-size:.9rem}
.sub-form input:focus{outline:none;border-color:var(--lilac)}
.sub-form button{padding:12px 20px;font-size:.88rem}
@media (max-width:420px){.sub-form{flex-direction:column}.sub-form button{justify-content:center}}

/* ---------------- page hero (inner pages) ---------------- */
.phero{padding:clamp(52px,7vw,88px) 0 clamp(30px,4vw,52px);position:relative;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:-60% -30% auto -30%;height:150%;
  background:radial-gradient(40% 50% at 30% 40%,rgba(123,77,255,.26),transparent 70%);pointer-events:none;
}
.phero .wrap{position:relative}
.phero h1{max-width:20ch}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--lilac)}

/* ---------------- filters + pagination ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.filters a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;border-radius:100px;border:1px solid var(--line);color:var(--muted);
}
.filters a:hover{border-color:var(--lilac);color:var(--chalk)}
.filters a.on{background:var(--violet);border-color:var(--violet);color:#fff}

.pager{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-size:.82rem;color:var(--muted);padding:0 12px;
}
.pager a:hover{border-color:var(--lilac);color:var(--chalk)}
.pager .on{background:var(--violet);border-color:var(--violet);color:#fff}

.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:48px;text-align:center;color:var(--muted)}

/* ---------------- reveal on scroll ---------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------------- accordion (FAQ) ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;
  gap:20px;font-family:var(--display);font-size:1.15rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-family:var(--mono);font-size:1.2rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:.96rem;max-width:76ch;padding-bottom:8px}