/* 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:'Hanken Grotesk',-apple-system,sans-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:700;line-height:.98;letter-spacing:-.035em;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:-.02em}
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:800;letter-spacing:-.05em;
  line-height:.92;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:500;
  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,.92);       /* opaque fallback — works without backdrop-filter */
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-d);
}
/* Where backdrop-filter is supported, ease the background back toward translucent */
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .topnav{background:rgba(16,19,46,.7)}
}
.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)}

/* Use-cases dropdown (desktop) */
.has-dropdown{position:relative}
.nav-dropdown-toggle{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(233,236,255,.78);
  background:transparent;border:0;cursor:pointer;
  padding:8px 0;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:color .25s,border-color .25s;
}
.nav-dropdown-toggle:hover,
.has-dropdown:focus-within>.nav-dropdown-toggle{color:#fff;border-color:var(--sky)}
.nav-dropdown-toggle.active{color:#fff;border-color:var(--blue-2)}
.nav-dropdown-toggle .caret{
  width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s,margin-top .25s;
}
.has-dropdown:hover>.nav-dropdown-toggle .caret,
.has-dropdown:focus-within>.nav-dropdown-toggle .caret,
.has-dropdown.open>.nav-dropdown-toggle .caret{transform:rotate(-135deg);margin-top:2px}
.nav-dropdown{
  list-style:none;margin:0;padding:6px;
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:210px;
  background:rgba(16,19,46,.96);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border:1px solid var(--line-d);border-radius:12px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.65);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:60;
}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-dropdown:hover>.nav-dropdown,
.has-dropdown:focus-within>.nav-dropdown,
.has-dropdown.open>.nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(8px);
}
.nav-dropdown li{width:100%}
.nav-dropdown a{
  display:block;white-space:nowrap;
  padding:11px 14px;border-radius:8px;border-bottom:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,236,255,.78);
  transition:background .2s,color .2s;
}
.nav-dropdown a:hover,
.nav-dropdown a.active{background:rgba(255,255,255,.06);color:#fff;border-bottom:0}
/* Desktop only: out-specify the generic .topnav ul / .topnav ul a rules that
   otherwise strip the dropdown box + item padding. Mobile rules are untouched. */
@media(min-width:641px){
  .topnav .nav-dropdown{padding:6px;gap:2px}
  .topnav .nav-dropdown a{padding:11px 16px;font-size:11px;letter-spacing:.12em;border-radius:8px}
  .topnav .nav-dropdown a:hover,
  .topnav .nav-dropdown a.active{background:rgba(255,255,255,.06);color:#fff;border-color:transparent}
}

/* hamburger — hidden on desktop. Inner span uses absolute positioning so it
   does not depend on flexbox-on-<button> (Safari refuses that combo). */
.nav-toggle{
  display:none;
  background:transparent;border:0;cursor:pointer;
  padding:9px;margin:-9px;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  color:inherit;
}
.nav-toggle-icon{
  display:block;position:relative;
  width:22px;height:16px;
}
.nav-toggle-bar{
  position:absolute;left:0;right:0;
  height:1.5px;background:#fff;
  transition:transform .3s ease,opacity .2s ease,top .3s ease,bottom .3s ease;
  transform-origin:center;
}
.nav-toggle-bar:nth-child(1){top:0}
.nav-toggle-bar:nth-child(2){top:50%;transform:translateY(-50%)}
.nav-toggle-bar:nth-child(3){bottom:0}
.topnav.is-open .nav-toggle-bar:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.topnav.is-open .nav-toggle-bar:nth-child(2){opacity:0}
.topnav.is-open .nav-toggle-bar:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

@media(max-width:640px){
  .topnav .wrap{height:56px}
  .topnav .brand{font-size:16px}
  .nav-toggle{display:block}

  /* nav panel: slides down below the bar */
  .topnav ul{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(16,19,46,.92);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--line-d);
    padding:6px 0;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s ease,opacity .2s ease,visibility .2s ease;
  }
  .topnav.is-open ul{
    transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
  }
  .topnav ul li{width:100%}
  .topnav ul a{
    display:block;width:100%;
    padding:14px clamp(22px,5vw,64px);
    font-size:12px;letter-spacing:.16em;
    border-bottom:0;
  }
  .topnav ul a:hover,
  .topnav ul a.active{
    background:rgba(255,255,255,.04);
    border-bottom:0;
  }

  /* dropdown collapses into an inline accordion within the mobile panel */
  .nav-dropdown-toggle{
    display:flex;width:100%;justify-content:space-between;align-items:center;
    padding:14px clamp(22px,5vw,64px);
    font-size:12px;letter-spacing:.16em;border-bottom:0;
  }
  .nav-dropdown{
    position:static;min-width:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    padding:0;gap:0;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-dropdown::before{display:none}
  .has-dropdown:hover>.nav-dropdown,
  .has-dropdown:focus-within>.nav-dropdown{transform:none}
  .has-dropdown.open>.nav-dropdown{max-height:220px;transform:none}
  .nav-dropdown a{
    display:block;
    padding:13px clamp(22px,5vw,64px) 13px calc(clamp(22px,5vw,64px) + 18px);
    font-size:11.5px;
  }
  .nav-dropdown a.active{background:rgba(255,255,255,.04)}
  .has-dropdown:hover>.nav-dropdown-toggle .caret,
  .has-dropdown:focus-within>.nav-dropdown-toggle .caret{transform:rotate(45deg);margin-top:-3px}
  .has-dropdown.open>.nav-dropdown-toggle .caret{transform:rotate(-135deg);margin-top:2px}
}

/* 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}
/* horizontal variant — even columns spanning the full width */
.feature-list.horizontal{display:grid;grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.feature-list.horizontal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.feature-list.horizontal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.feature-list.horizontal{grid-template-columns:1fr}}

/* 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}

/* practice intro — copy beside circular portrait */
.practice-intro{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px);align-items:center;margin-bottom:clamp(40px,6vw,64px)}
.practice-copy h2{margin-top:0}
.practice-copy p:last-child{margin-bottom:0}
.practice-portrait{margin:0}
.practice-portrait img{
  width:100%;max-width:360px;aspect-ratio:1/1;height:auto;
  display:block;margin:0 auto;
  border-radius:50%;
  border:1px solid var(--line);
  box-shadow:0 26px 55px -34px rgba(16,19,46,.45);
}
@media(min-width:721px){
  .practice-intro{grid-template-columns:1fr minmax(240px,330px);gap:clamp(44px,6vw,84px)}
}

/* 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}
}