/* =========================================================================
   ELiN Partners — REFINEMENT LAYER  (v170)
   Loaded LAST on every page (EN / NL / DE).
   Purpose: one visual voice across both stylesheet systems
   (index.html uses light.css; all other pages use main.css + elin-light.css).

   Seven moves:
   1. Type scale with real extremes        5. No more tilted photo cards
   2. Accent discipline (gold is rare)     6. Considered motion
   3. De-boxing: hairlines, not cards      7. Fjord temperature + contrast fixes
   4. One house grade for all photography
   ========================================================================= */

:root{
  --r-ink:#2A2C30;
  --r-quiet:#7A5A26;          /* brandbook deep gold — the quiet accent on paper */
  --r-loud:#E8C176;           /* bright gold — dark grounds only, used sparingly */
  --r-hair:rgba(42,44,48,.13);
  --r-hair-dark:rgba(244,247,248,.16);
  --r-fjord:#9DB8C4;
  --r-ease:cubic-bezier(.22,.68,.16,1);
}

/* =========================================================================
   1. TYPE — push the extremes apart. Labels smaller, headlines larger.
   ========================================================================= */

.slabel,
.eyebrow,
.section-label,
.page-header__label,
[class*="__label"]{
  font-size:10.5px !important;
  letter-spacing:.26em !important;
  margin-bottom:clamp(18px,2.4vh,30px) !important;
}
.section-label{ margin-bottom:clamp(26px,3.4vh,44px) !important; }

.slabel::before,
.eyebrow.tick::before,
.section-label::before{ width:24px !important; }

/* Homepage vocabulary */
.manifesto .big{
  font-size:clamp(38px,6.6vw,96px) !important;
  line-height:.98 !important;
  letter-spacing:-.028em !important;
  max-width:15ch !important;
}
.h2c{
  font-size:clamp(32px,4.6vw,66px) !important;
  line-height:1.02 !important;
  letter-spacing:-.022em !important;
}

/* Other-page vocabulary */
.page-header__title{
  font-size:clamp(38px,6vw,86px) !important;
  line-height:1 !important;
  letter-spacing:-.026em !important;
}
.section-title{
  line-height:1.0 !important;
  letter-spacing:-.028em !important;
}

/* Body copy: a touch more air, a touch narrower measure */
.manifesto .expand p,
.page-header__lede,
.hero-full__lead{ line-height:1.62 !important; }

/* =========================================================================
   2. ACCENT DISCIPLINE
   Bright gold survives only on dark ground (hero, slate sections, footer).
   On paper the accent becomes the brandbook's deep gold: present, not loud.
   ========================================================================= */

.h2c .gold,
h1 .gold, h2 .gold,
h1 em, h2 em,
.section-title em,
.page-header__title em,
.cta__title em{
  color:var(--r-quiet) !important;
  text-shadow:none !important;
}

/* Dark grounds keep the bright note */
.hero-full__title .gl,
.hero-full__lead .gl,
.ebl h2 .gold,
.efh-q p em,
.page-header__title em,
.lightband__text em,
.section--slate h2 .gold,
.site-footer h2 .gold{ color:var(--r-loud) !important; }

.page-header__title em{ text-shadow:0 0 30px rgba(232,193,118,.22) !important; }

/* The manifesto's dimmed first line is the best headline on the site.
   Give it slightly more separation. */
.manifesto .big .dim{ color:#A7A5A6 !important; }

/* =========================================================================
   3. DE-BOXING — hairlines and whitespace instead of bordered rectangles
   ========================================================================= */

/* Homepage: "Hunt with us" duo */
.duo:not(.duo--light) > a{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--r-hair) !important;
  border-radius:0 !important;
  padding:clamp(26px,2.4vw,38px) 0 clamp(20px,2vw,30px) !important;
  transition:border-color .5s var(--r-ease), transform .5s var(--r-ease) !important;
}
.duo:not(.duo--light) > a:hover{
  transform:none !important;
  box-shadow:none !important;
  border-top-color:var(--r-quiet) !important;
}
.duo:not(.duo--light) > a:hover h3{ color:var(--r-quiet) !important; }
.duo:not(.duo--light) h3{ transition:color .4s var(--r-ease); }
.duo:not(.duo--light) .meta{ transition:letter-spacing .4s var(--r-ease); }
.duo:not(.duo--light) > a:hover .meta{ letter-spacing:.16em !important; }

/* Homepage: "For whom" cards */
.fwhom-card{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--r-hair) !important;
  border-radius:0 !important;
  padding:24px 0 20px !important;
}
.fwhom-card:hover{
  transform:none !important;
  box-shadow:none !important;
  border-top-color:var(--r-quiet) !important;
}

/* Homepage: Bright Leaders cards — let the photograph sit on the ground */
.ebl-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  transition:transform .6s var(--r-ease) !important;
}
.ebl-card:hover{ transform:translateY(-6px) !important; }
.ebl-body{ padding:18px 0 0 !important; }
.ebl-quote{ font-size:17.5px !important; line-height:1.38 !important; }

/* Dark service cards keep their form, but the border stops shouting */
.esvc{ border-color:rgba(244,247,248,.10) !important; border-radius:4px !important; }
.esvc:hover{ border-color:rgba(232,193,118,.55) !important; }
.esvc p{ font-size:15px !important; line-height:1.62 !important; }

/* Other pages: contact paths and similar link-cards */
.contact-path,
.candidate-path,
.bl-more a{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--r-hair) !important;
  border-radius:0 !important;
}
.contact-path:hover,
.bl-more a:hover{
  transform:none !important;
  box-shadow:none !important;
  border-top-color:var(--r-quiet) !important;
}

/* People page: the "Insights" beige slabs become a quiet rule + link */
.partner__insights{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--r-hair) !important;
  border-radius:0 !important;
  padding:18px 0 0 !important;
}
.partner__insights:hover{
  background:transparent !important;
  border-top-color:var(--r-quiet) !important;
}
.partner__insights:hover .partner__insights-label,
.partner__insights:hover .partner__insights-tagline,
.partner__insights:hover .partner__insights-arrow{ color:var(--r-quiet) !important; }

/* Chips stay chips — they are meant to read as controls */
.esig-chip{ border-color:rgba(42,44,48,.10) !important; }

/* =========================================================================
   4. ONE HOUSE GRADE FOR PHOTOGRAPHY
   The portraits come from a dozen different studios. A single, restrained
   grade makes them read as one series; full colour returns on hover.
   ========================================================================= */

.ebl-pic,
.efh-pic img,
.bl-lead__frame img,
.founder__pic img,
.founders3 .founder__pic img,
.person .pic img,
.bl-feature__media img,
.bl-card__media img,
.partner__portrait img,
.duo__grid img{
  filter:saturate(.82) contrast(1.05) sepia(.10) brightness(1.01) !important;
  transition:filter .7s var(--r-ease), transform .9s var(--r-ease) !important;
}

.ebl-card:hover .ebl-pic,
.efh-card:hover .efh-pic img,
.bl-lead:hover .bl-lead__frame img,
.founder:hover .founder__pic img,
.person:hover .pic img,
.bl-feature:hover .bl-feature__media img{
  filter:saturate(1) contrast(1.02) sepia(0) !important;
}

/* Consistent portrait ratio wherever a frame allows it */
.bl-lead__frame,
.efh-pic{ aspect-ratio:4/5 !important; overflow:hidden !important; }
.bl-lead__frame img{ width:100% !important; height:100% !important; object-fit:cover !important; }

/* =========================================================================
   5. NO MORE TILTS — the polaroid effect fights the rest of the language
   ========================================================================= */

.efh-fig,
.efh-fig.l,
.efh-card:hover .efh-fig,
.founder__pic,
.founder--offset,
.person .pic,
#ineke .partner__portrait,
#elbrich .partner__portrait,
.partner:hover .partner__portrait{
  transform:none !important;
  rotate:0deg !important;
}
.efh-pic{ border-radius:2px !important; box-shadow:0 22px 60px rgba(0,0,0,.34) !important; }
.efh-bar, .efh-bar.l{ display:none !important; }

/* Softer, flatter shadows everywhere — deep shadows read as 2015 */
.founder__pic, .person .pic, .frame, .bl-lead__frame{
  border-radius:2px !important;
  box-shadow:0 18px 44px -28px rgba(31,45,54,.45) !important;
}

/* =========================================================================
   6. MOTION — slow, considered, never bouncy
   ========================================================================= */

/* NOTE: the hidden state is scoped to .js-anim, which a one-line script in
   <head> sets. No JavaScript, no hidden content — the page still reads. */

.js-anim .reveal,
.js-anim .reveal-up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.05s var(--r-ease), transform 1.05s var(--r-ease);
  will-change:opacity, transform;
}
.js-anim .reveal.in-view, .js-anim .reveal.is-in,
.js-anim .reveal-up.in-view, .js-anim .reveal-up.is-in{ opacity:1; transform:none; }

/* Staggered children inside a revealed block */
.js-anim .r-stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .95s var(--r-ease), transform .95s var(--r-ease);
}
.js-anim .r-stagger.in-view > *{ opacity:1; transform:none; }
.js-anim .r-stagger.in-view > *:nth-child(1){ transition-delay:.00s }
.js-anim .r-stagger.in-view > *:nth-child(2){ transition-delay:.09s }
.js-anim .r-stagger.in-view > *:nth-child(3){ transition-delay:.18s }
.js-anim .r-stagger.in-view > *:nth-child(4){ transition-delay:.27s }
.js-anim .r-stagger.in-view > *:nth-child(5){ transition-delay:.36s }
.js-anim .r-stagger.in-view > *:nth-child(6){ transition-delay:.45s }

/* Slow scale-drift on full-bleed image bands */
.js-anim .ewave img, .js-anim .lightband__img{
  transform:scale(1.07);
  transition:transform 1.8s var(--r-ease);
  will-change:transform;
}
.js-anim .ewave.in-view img, .js-anim .lightband.in-view .lightband__img{ transform:scale(1); }

/* The fixed bar inherited .wrap's max-width, so it stopped 40px short of
   each edge on wide screens — a floating slab rather than a bar. */
.topbar{ max-width:none !important; width:auto !important; }

/* Homepage nav: transparent over the video, solid once you scroll */
body.has-dark-hero .topbar{
  background:transparent !important;
  border-bottom-color:transparent !important;
  transition:background .55s var(--r-ease), border-color .55s var(--r-ease),
             padding .55s var(--r-ease);
}
body.has-dark-hero .topbar::after{ opacity:0 !important; transition:opacity .5s }
body.has-dark-hero .topbar .mark,
body.has-dark-hero .topbar nav a{ color:rgba(255,255,255,.94) !important; }
body.has-dark-hero .topbar .cta{ border-color:rgba(255,255,255,.55) !important; color:#fff !important; }
body.has-dark-hero .topbar .cta:hover{ background:#fff !important; color:#232429 !important; }
body.has-dark-hero .topbar .nav__register{
  background:transparent !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
body.has-dark-hero .topbar .langs a{ color:rgba(255,255,255,.7) !important; }
body.has-dark-hero .topbar .langs a.on{ color:#fff !important; border-bottom-color:var(--r-loud) !important; }
body.has-dark-hero .navtoggle span{ background:#fff !important; }

body.has-dark-hero.is-scrolled .topbar{
  background:rgba(251,249,243,.93) !important;
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--r-hair) !important;
  padding-top:11px !important; padding-bottom:11px !important;
}
body.has-dark-hero.is-scrolled .topbar::after{ opacity:.85 !important }
body.has-dark-hero.is-scrolled .topbar .mark,
body.has-dark-hero.is-scrolled .topbar nav a{ color:var(--r-ink) !important; }
body.has-dark-hero.is-scrolled .topbar .cta{ border-color:var(--r-ink) !important; color:var(--r-ink) !important; }
body.has-dark-hero.is-scrolled .topbar .nav__register{
  border-color:var(--r-fjord) !important; color:var(--r-ink) !important; }
body.has-dark-hero.is-scrolled .topbar .langs a{ color:#7A7A7D !important }
body.has-dark-hero.is-scrolled .topbar .langs a.on{ color:var(--r-ink) !important }
body.has-dark-hero.is-scrolled .navtoggle span{ background:var(--r-ink) !important }

/* The ticker was the only motion after the hero, and the most generic kind.
   Slow it right down so it reads as drift rather than as a news crawl. */
.ticker__track{ animation-duration:78s !important; }
.ticker{ background:transparent !important; border-color:var(--r-hair) !important; }
.ticker__track span{ font-size:10.5px !important; letter-spacing:.3em !important; }

@media (prefers-reduced-motion:reduce){
  .js-anim .reveal,.js-anim .reveal-up,.js-anim .r-stagger > *{
    opacity:1 !important; transform:none !important; transition:none !important }
  .js-anim .ewave img,.js-anim .lightband__img{ transform:none !important; transition:none !important }
}

/* =========================================================================
   7. CONTRAST + TEMPERATURE
   ========================================================================= */

/* "Calm on the surface" band: beautiful line, previously unreadable.
   Deepen the veil and give the type a real scrim. */
.ewave{ height:clamp(300px,44vh,420px) !important; }
.ewave .veil{
  background:
    radial-gradient(62% 78% at 50% 50%, rgba(12,18,26,.58), rgba(12,18,26,0) 76%),
    linear-gradient(180deg, rgba(12,18,26,.42), rgba(12,18,26,.30) 45%, rgba(12,18,26,.50)) !important;
}
/* The line was a flex row, so the accent span became a second flex item and
   the sentence broke in two columns. Back to normal inline flow, centred. */
.ewave .q{
  display:block !important;
  inset:auto 0 auto 0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:min(24ch,86vw) !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:clamp(26px,3.2vw,44px) !important;
  line-height:1.16 !important;
  color:#FCFAF4 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 44px rgba(0,0,0,.55) !important;
}
.ewave .q .gold{ white-space:normal !important; }
.ewave .q .gold{ color:var(--r-loud) !important; }

/* Give one paper section its own temperature so the page is not
   cream-cream-cream-cream all the way down. */
.esig{
  background:
    radial-gradient(120% 92% at 50% 0%, #DCE9ED 0%, rgba(220,233,237,0) 64%),
    radial-gradient(70% 78% at 10% 100%, rgba(157,184,196,.34), transparent 62%),
    linear-gradient(180deg,#E4EDEF,#F6F3EC) !important;
}

/* =========================================================================
   8. RHYTHM — break the "eyebrow / centred headline / paragraph" loop
   The manifesto becomes an asymmetric editorial spread instead of a
   centred block floating in space.
   ========================================================================= */

@media (min-width:900px){
  .manifesto{
    text-align:left !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;
    gap:clamp(40px,6vw,96px) !important;
    align-items:end !important;
  }
  .manifesto .big{ margin:0 !important; grid-column:1 !important; }
  .manifesto .expand{
    grid-column:2 !important;
    margin:0 !important;
    max-width:44ch !important;
    padding-top:0 !important;
    border-top:0 !important;
    border-left:1px solid var(--r-hair) !important;
    padding-left:clamp(24px,2.6vw,40px) !important;
  }
  /* The eyebrow belongs with the headline, left, not floating in the middle */
  .manifesto > .eyebrow{
    grid-column:1 !important;
    justify-content:flex-start !important;
    margin-bottom:22px !important;
  }

  /* Headline hangs slightly into the left margin — an editorial signal */
  .manifesto .big{ margin-left:-.055em !important; }

  /* The "What we do" and "Hunt with us" headings stop being centred */
  .section.tight .h2c{ margin-left:0 !important; }
}

/* Sections should not all be the same width */
.manifesto{ max-width:1240px; margin-left:auto; margin-right:auto; }
.section.tight{ padding-top:clamp(70px,11vh,140px) !important; }

/* =========================================================================
   9. SMALL THINGS THAT ADD UP
   ========================================================================= */

/* Mono body text inside the dark service cards was hard to read */
.esvc .sub{ letter-spacing:.18em !important; }

/* Links: a hairline that grows, rather than a static underline */
.link, .bl-serieslink a, .duo .meta{ text-underline-offset:.28em; }

/* Selection in brand colour — a two-second detail people notice */
::selection{ background:rgba(157,184,196,.35); color:var(--r-ink); }

/* Focus states that are visible without being ugly (accessibility) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--r-quiet) !important;
  outline-offset:3px !important;
  border-radius:2px;
}

/* Footer: give the sign-off some air */
.site-footer h2{ font-size:clamp(30px,3.6vw,52px) !important; line-height:1.04 !important; }

/* v183 — Homepage: the video now runs up behind the fixed bar, so the white
   nav text sits on the image instead of on the cream page (it was invisible
   until you scrolled). */
body.has-dark-hero .hero-full{ margin-top:0 !important; }
body.has-dark-hero:not(.is-scrolled) .topbar .mark span{ color:rgba(255,255,255,.72) !important; }