/* Editorial design system
   Shared base styles, hero, navigation and footer extracted from
   feedback-intelligence-case-study.html so all pages share one tone. */

:root{
  --ink:#10132E;
  --ink-2:#171C42;
  --ink-3:#202663;
  --paper:#F4F1E9;
  --paper-2:#FBF9F3;
  --blue:#3550E6;
  --blue-2:#6E86F7;
  --sky:#A9BBFB;
  --clay:#DB6A33;
  --clay-2:#EC9A5B;
  --line:rgba(16,19,46,.13);
  --line-d:rgba(255,255,255,.14);
  --muted:#595E7A;
  --muted-d:rgba(233,236,255,.62);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue);color:#fff}
img{max-width:100%;height:auto;display:block}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
section{position:relative}
.pad{padding:clamp(72px,11vw,150px) 0}
.dark{background:var(--ink);color:#fff}
.dark .contour path{stroke:rgba(169,187,251,.10)}

/* typography */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.015em;color:inherit}
h2{font-size:clamp(33px,5.2vw,62px);margin-bottom:22px}
h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:14px;letter-spacing:-.01em}
h4{font-size:18px;margin-bottom:8px;font-weight:600}

p{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:18px;max-width:62ch}
.dark p{color:var(--muted-d)}
.dark p b,.dark p strong{color:#fff}

a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(53,80,230,.3);transition:border-color .25s,color .25s}
a:hover{border-color:var(--blue);color:var(--ink)}
.dark a{color:var(--sky);border-color:rgba(169,187,251,.35)}
.dark a:hover{color:#fff;border-color:#fff}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--blue);
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--blue);opacity:.7}
.dark .eyebrow{color:var(--sky)}
.dark .eyebrow::before{background:var(--sky)}

.lede{font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:54ch;line-height:1.6;margin-bottom:28px}
.dark .lede{color:var(--muted-d)}

/* reveal animation */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* contour motif — disabled site-wide; only the glow gradients remain */
.contour{display:none}

/* HERO */
.hero{
  background:var(--ink);color:#fff;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
  padding:120px 0 80px;
}
.hero.compact{min-height:auto;padding:150px 0 90px}
.hero .glow{
  position:absolute;width:90vw;height:90vw;max-width:1100px;max-height:1100px;
  top:-30%;right:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(53,80,230,.42),rgba(53,80,230,0) 62%);
  filter:blur(8px);z-index:0;
}
.hero .glow2{
  position:absolute;width:60vw;height:60vw;max-width:680px;max-height:680px;
  bottom:-24%;left:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(219,106,51,.20),rgba(219,106,51,0) 60%);
  z-index:0;
}
.hero .contour path{stroke:rgba(169,187,251,.16)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-meta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sky);margin-bottom:30px;display:flex;flex-wrap:wrap;gap:8px 16px;
}
.hero-meta span{opacity:.85}
.hero h1{
  font-size:clamp(44px,8.6vw,108px);font-weight:600;letter-spacing:-.03em;
  line-height:.96;color:#fff;margin:0;max-width:14ch;
}
.hero h1 em{font-style:italic;color:var(--blue-2);font-weight:500}
.hero .hero-tagline{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(24px,3.4vw,40px);color:var(--sky);
  margin-top:18px;letter-spacing:-.01em;line-height:1.2;
  max-width:36ch;
}
.hero-sub{
  font-size:clamp(17px,2.3vw,23px);color:rgba(233,236,255,.85);
  max-width:54ch;margin-top:32px;line-height:1.55;
}
.hero-sub a{color:var(--sky);border-color:rgba(169,187,251,.4)}
.hero-sub a:hover{color:#fff;border-color:#fff}
.hero-foot{
  margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  font-size:14px;color:var(--muted-d);
}
.tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line-d);border-radius:100px;padding:7px 14px;color:#fff;
}
.hero .anim{opacity:0;transform:translateY(22px);animation:rise .9s forwards cubic-bezier(.2,.7,.2,1)}
.hero .a1{animation-delay:.1s}.hero .a2{animation-delay:.28s}.hero .a3{animation-delay:.46s}.hero .a4{animation-delay:.62s}.hero .a5{animation-delay:.78s}
@keyframes rise{to{opacity:1;transform:none}}

/* TOP NAVIGATION */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(16,19,46,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-d);
}
.topnav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:62px;
}
.topnav .brand{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:-.01em;
  border-bottom:none;
}
.topnav .brand:hover{color:#fff;border-bottom:none}
.topnav ul{list-style:none;display:flex;gap:32px;margin:0;padding:0}
.topnav ul a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(233,236,255,.78);
  text-decoration:none;padding:8px 0;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.topnav ul a:hover{color:#fff;border-color:var(--sky)}
.topnav ul a.active{color:#fff;border-color:var(--blue-2)}
@media(max-width:640px){
  .topnav .wrap{height:56px}
  .topnav ul{gap:18px}
  .topnav ul a{font-size:10.5px;letter-spacing:.12em}
  .topnav .brand{font-size:16px}
}

/* FOOTER */
.editorial-footer{background:var(--ink);color:#fff;padding:60px 0 50px;position:relative;overflow:hidden}
.editorial-footer .contour path{stroke:rgba(169,187,251,.08)}
.editorial-footer .wrap{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.editorial-footer .nm{font-family:var(--serif);font-size:26px;font-weight:600}
.editorial-footer .cr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-d);margin-top:8px;line-height:1.7}
.editorial-footer .rt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.editorial-footer .rt a{color:var(--sky);border-color:rgba(169,187,251,.35)}
.editorial-footer .rt a:hover{color:#fff;border-color:#fff}

/* CONTENT PATTERNS */

/* two-column grid */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,80px);align-items:start}
@media(max-width:880px){.two-col{grid-template-columns:1fr}}

/* feature list (with bullet dots) */
.feature-list{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.feature-list li{background:var(--paper-2);padding:18px 22px;font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:14px;line-height:1.4}
.feature-list li::before{content:"";width:6px;height:6px;background:var(--blue);border-radius:50%;flex-shrink:0}

/* logos grid — no list bullets, every logo normalised to the same optical height */
.logos-grid{
  list-style:none;
  padding:0;
  margin:50px 0 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
}
.logos-grid li{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
}
.logos-grid img{
  height:26px;
  width:auto;
  max-width:100%;
  opacity:.7;
  filter:grayscale(1);
  transition:opacity .25s,filter .25s;
}
.logos-grid img:hover{opacity:1;filter:grayscale(0)}
@media(max-width:880px){.logos-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.logos-grid{grid-template-columns:repeat(2,1fr)}}

/* sector list — editorial arrow-prefixed rows for high-level client categories */
.sector-list{
  list-style:none;
  padding:0;
  margin:36px 0 0;
}
.sector-list li{
  font-family:var(--serif);
  font-size:clamp(16px,2vw,20px);
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  padding:18px 0;
  border-top:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:18px;
}
.sector-list li:last-child{border-bottom:1px solid var(--line)}
.sector-list li::before{
  content:"→";
  font-family:var(--mono);
  font-size:14px;
  color:var(--blue);
  flex-shrink:0;
}

/* contact icons (dark surface) */
.contact-icons{display:flex;gap:18px;align-items:center;list-style:none;padding:0;margin:0}
.contact-icons li{margin:0}
.contact-icons a{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  transition:transform .3s,background .3s,border-color .3s;
}
.contact-icons a:hover{transform:translateY(-3px);background:rgba(53,80,230,.18);border-color:var(--blue-2)}
.contact-icons img{width:22px;height:auto;filter:brightness(0) invert(1);opacity:.85}
.contact-icons a:hover img{opacity:1}
.contact-icons.center{justify-content:center}

/* hero image strip */
.hero-image{padding:0;background:var(--ink)}
.hero-image img{width:100%;display:block;margin:0 auto;max-width:1440px}

/* prose block (long-form text — impressum, notices) */
.prose h2{font-size:clamp(36px,5.2vw,56px);margin-bottom:32px}
.prose h3{margin-top:38px;font-size:clamp(20px,2.3vw,26px);color:var(--ink)}
.prose p{font-size:16px;line-height:1.75;margin-bottom:16px;color:var(--muted);max-width:64ch}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue)}

@media(prefers-reduced-motion:reduce){
  .rv,.hero .anim{opacity:1!important;transform:none!important;animation:none!important}
}