/* =============================================
   reddo – Stylesheet
   Navy + Silver | Executive Consulting
   ============================================= */

:root {
  --navy:        #1A2F5A;
  --navy-dark:   #0D1A2E;
  --navy-mid:    #1E3A70;
  --navy-light:  #254688;
  --silver:      #B0BEC8;
  --silver-light:#D0DAE4;
  --white:       #F5F6F8;
  --off-white:   #EDF0F3;
  --text:        #1A2A3A;
  --text-muted:  #6B7A8D;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, sans-serif;
  --max:   1180px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* TYPE */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
p  { font-size: clamp(1.05rem, 1.6vw, 1.1rem); line-height: 1.85; color: #3A4A5C; }
em { font-style: italic; color: var(--silver); }
strong { font-weight: 500; color: var(--navy); }

/* LAYOUT */
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); }
.container--narrow { max-width: 680px; }
.section { padding: clamp(5rem, 10vw, 9rem) 0; }
.section--dark    { background: var(--navy); }
.section--dark p  { color: var(--silver-light); }
.section--dark h2 { color: var(--white); }
.section--light   { background: var(--white); }
.section--offwhite { background: var(--off-white); }
.section--contact { background: var(--navy); text-align: center; }
.section--contact h2 { color: var(--white); margin-bottom: 1.2rem; }
.section--contact p  { color: var(--silver-light); max-width: 460px; margin: 0 auto; }

/* LABEL */
.label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.label--silver { color: var(--silver); }

/* BUTTONS */
.btn {
  display: inline-block;
  width: fit-content;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border: 1px solid currentColor;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  margin-top: 2rem;
  white-space: nowrap;
}
.btn--outline-silver { color: var(--silver-light); border-color: var(--silver); }
.btn--outline-silver:hover { background: var(--silver); color: var(--navy); }

/* SPLIT */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.split__left h2 { margin-top: 0.5rem; }
.split__right p  { margin-bottom: 1.2rem; }

.inline-quote {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--navy);
  border-left: 2px solid var(--silver);
  padding-left: 1.2rem;
  margin-top: 1.8rem;
  line-height: 1.55;
  font-style: italic;
  font-weight: 300;
}
.section--dark .inline-quote { color: var(--silver-light); }

.muted { font-size: 0.87rem !important; color: var(--text-muted) !important; font-style: italic; }

/* =============================================
   NAV
   ============================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(168,180,192,0.12);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  height: 88px; display: flex; align-items: center; justify-content: space-between;
}
.nav__logo { display: flex; align-items: flex-end; align-self: flex-end; padding-bottom: 1rem; }
.nav__logo-img { height: 52px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); transition: color 0.2s; }
.nav__links a:hover { color: var(--white); }
.nav__cta { border: 1px solid rgba(168,180,192,0.35) !important; padding: 0.45rem 1.1rem; color: var(--white) !important; }
.nav__cta:hover { background: var(--silver); color: var(--navy) !important; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 1px; background: var(--silver); }

/* NAV DROPDOWN */
.nav__dropdown { position: relative; }
.nav__dropdown > a { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.nav__dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
  transition: transform 0.2s;
}
.nav__dropdown:hover > a::after { transform: rotate(180deg); }
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--navy-dark);
  border: 1px solid rgba(168,180,192,0.12);
  padding: 1.2rem 0 0.6rem;
  z-index: 200;
}
.nav__dropdown:hover .nav__dropdown-menu { display: block; }
.nav__dropdown-menu a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--silver) !important;
  transition: color 0.2s, background 0.2s;
}
.nav__dropdown-menu a:hover { color: var(--white) !important; background: rgba(255,255,255,0.04); }

/* =============================================
   HERO
   ============================================= */
.hero__qualifier { font-size: 1rem !important; color: rgba(176,190,200,0.75) !important; margin-top: 1.4rem; line-height: 1.75; max-width: 540px; font-style: italic; }
.hero {
  min-height: 100vh;
  background: var(--navy);
  display: flex; align-items: center;
  padding: calc(88px + 5rem) clamp(1.5rem, 5vw, 3rem) 5rem;
  position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; top: -20%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(168,180,192,0.035) 0%, transparent 65%);
  pointer-events: none;
}
.hero__inner { max-width: var(--max); width: 100%; }
.hero__headline { color: var(--white); max-width: 820px; margin-bottom: 2rem; }
.hero__sub { font-size: clamp(1rem, 1.8vw, 1.18rem); color: var(--silver-light); max-width: 520px; line-height: 1.65; }

/* =============================================
   3-LAYER MODEL
   ============================================= */
.layers { display: flex; flex-direction: column; gap: 2px; margin: 4rem 0; max-width: 820px; }
.layer {
  display: grid; grid-template-columns: 160px 1fr auto;
  align-items: center; gap: 2rem;
  padding: 1.3rem 1.8rem;
  border: 1px solid rgba(168,180,192,0.1);
  transition: border-color 0.25s;
}
.layer:hover { border-color: rgba(168,180,192,0.25); }
.layer--logic { border-color: rgba(168,180,192,0.3); background: rgba(168,180,192,0.04); }
.layer__label {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--silver);
  display: flex; align-items: center; gap: 0.7rem;
}
.layer__badge {
  background: var(--silver); color: var(--navy);
  font-size: 0.55rem; padding: 0.12rem 0.45rem; letter-spacing: 0.1em;
}
.layer__items { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.layer__items span { font-size: 0.87rem; color: var(--silver-light); }
.layer--logic .layer__items span { color: var(--white); }
.layer__note { font-size: 0.72rem; color: var(--silver); opacity: 0.55; white-space: nowrap; font-style: italic; }

.pullquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--silver-light); line-height: 1.55;
  border-left: 2px solid var(--silver); padding-left: 2rem;
  max-width: 700px; margin-top: 1rem;
}

/* =============================================
   SERVICES
   ============================================= */
.services { display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem; margin-top: 4rem; }
.service { border-top: 1px solid rgba(13,27,46,0.1); padding-top: 2rem; }
.service__num { font-family: var(--serif); font-size: 2.2rem; color: var(--silver); opacity: 0.35; margin-bottom: 1rem; line-height: 1; }
.service h3 { color: var(--navy); margin-bottom: 1rem; }
.service p   { margin-bottom: 1rem; }
.service__delivers { display: flex; flex-direction: column; gap: 0.4rem; margin: 1.2rem 0; }
.service__delivers li { font-size: 0.95rem; color: var(--text-muted); padding-left: 1rem; position: relative; }
.service__delivers li::before { content: '—'; position: absolute; left: 0; color: var(--silver); }
.service__link { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--navy); font-weight: 500; border-bottom: 1px solid rgba(13,27,46,0.2); padding-bottom: 1px; transition: border-color 0.2s; }
.service__link:hover { border-color: var(--navy); }

/* =============================================
   CASES
   ============================================= */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin: 3rem 0; }
.metric { padding: 2.5rem 1.5rem; border: 1px solid rgba(13,27,46,0.08); text-align: center; background: var(--white); }
.metric__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); line-height: 1; margin-bottom: 0.6rem; }
.metric__label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.cases { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; margin-top: 3.5rem; }
.case { background: var(--white); border: 1px solid rgba(13,27,46,0.08); padding: 2rem; }
.case__tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
.case__sector { font-family: var(--serif); font-size: 0.95rem; color: var(--navy); margin-bottom: 1.2rem; font-style: italic; }
.case__challenge { font-size: 0.9rem !important; line-height: 1.7; margin-bottom: 1.4rem; }
.case__outcome { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.4rem; padding: 1rem 0; border-top: 1px solid rgba(13,27,46,0.06); border-bottom: 1px solid rgba(13,27,46,0.06); }
.case__metric { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); font-weight: 500; }
.case__quote { font-size: 0.95rem !important; font-style: italic; color: var(--text-muted) !important; line-height: 1.7; }

/* =============================================
   HOW / SPRINT BOX
   ============================================= */
.sprint-box { border: 1px solid rgba(13,27,46,0.12); padding: 1.8rem; margin: 2rem 0; background: var(--off-white); }
.sprint-box__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(13,27,46,0.08); }
.sprint-box ul { display: flex; flex-direction: column; gap: 0.5rem; }
.sprint-box li { font-size: 0.88rem; color: var(--text); padding-left: 1rem; position: relative; }
.sprint-box li::before { content: '—'; position: absolute; left: 0; color: var(--silver); }

/* =============================================
   MANDATE PATHS
   ============================================= */
.mandate-paths { margin-top: 2rem; border-top: 1px solid rgba(13,27,46,0.08); padding-top: 1.8rem; }
.mandate-paths__label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.2rem; }
.mandate-path { padding: 1.2rem 0; border-bottom: 1px solid rgba(13,27,46,0.06); }
.mandate-path:last-child { border-bottom: none; padding-bottom: 0; }
.mandate-path__title { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin-bottom: 0.4rem; font-weight: 500; }
.mandate-path p { font-size: 1rem !important; line-height: 1.8; margin-bottom: 0; }

/* =============================================
   CONTACT
   ============================================= */
.contact__intro { font-size: 0.82rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver) !important; margin-bottom: 3rem; margin-top: 0.5rem; }
.contact-paths { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-bottom: 3rem; text-align: left; }
.contact-path { border: 1px solid rgba(168,180,192,0.12); padding: 2rem; }
.contact-path--active { border-color: rgba(168,180,192,0.28); }
.contact-path__num { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--silver); opacity: 0.5; margin-bottom: 0.8rem; }
.contact-path__label { font-family: var(--serif); font-size: 1.15rem; color: var(--white); margin-bottom: 1rem; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.contact-path__price { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); border: 1px solid rgba(168,180,192,0.3); padding: 0.2rem 0.6rem; }
.contact-path p { font-size: 1rem !important; color: var(--silver-light) !important; margin-bottom: 1.5rem; line-height: 1.75; }
.contact-path__link { font-size: 0.8rem; color: var(--silver); letter-spacing: 0.05em; border-bottom: 1px solid rgba(168,180,192,0.25); padding-bottom: 0.1rem; transition: color 0.2s; }
.contact-path__link:hover { color: var(--white); }
.contact-path .btn { margin-top: 0; }
.contact__note { font-size: 0.75rem !important; color: var(--silver) !important; opacity: 0.6; margin-top: 0; letter-spacing: 0.05em; }

/* =============================================
   FOOTER
   ============================================= */
.footer { background: var(--navy-dark); border-top: 1px solid rgba(168,180,192,0.08); padding: 3rem 0; }
.footer__top { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; }
.footer__logo-img { height: 36px !important; width: auto !important; display: block; }
.footer__nav { display: flex; gap: 2rem; margin-left: 2rem; }
.footer__nav a { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); opacity: 0.7; transition: opacity 0.2s; }
.footer__nav a:hover { opacity: 1; }
.footer__email { font-size: 0.78rem; color: var(--silver); margin-left: auto; transition: color 0.2s; }
.footer__email:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--silver); opacity: 0.4; padding-top: 1.5rem; border-top: 1px solid rgba(168,180,192,0.06); flex-wrap: wrap; gap: 1rem; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { color: var(--silver); transition: opacity 0.2s; }
.footer__legal a:hover { opacity: 0.8; }

/* =============================================
   LANGUAGE TOGGLE
   ============================================= */
html[lang="en"] .t-de { display: none !important; }
html[lang="de"] .t-en { display: none !important; }

.lang-toggle {
  display: flex; align-items: center; gap: 0.35rem; margin-left: 1.5rem;
}
.lang-sep { color: rgba(168,180,192,0.3); font-size: 0.65rem; line-height: 1; }
.lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--silver); opacity: 0.45;
  transition: opacity 0.2s, color 0.2s; padding: 0; line-height: 1;
}
.lang-btn.active { opacity: 1; color: var(--white); }
.lang-btn:hover  { opacity: 0.8; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .metrics { grid-template-columns: repeat(2,1fr); }
}
/* =============================================
   CONTACT FORM
   ============================================= */
.contact-form-wrap {
  max-width: 680px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.form-group--full {
  grid-column: 1 / -1;
}
.form-group label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(168,180,192,0.25);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(176,190,200,0.3);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(168,180,192,0.6);
}
.form-group select option {
  background: var(--navy-dark);
  color: var(--white);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 2rem;
  margin-top: 0.5rem;
}
.form-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-top: 3px;
  border: 1px solid rgba(168,180,192,0.4);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--silver);
}
.form-check label {
  font-size: 0.78rem;
  color: var(--silver-light);
  line-height: 1.6;
}
.form-check label a {
  color: var(--silver);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-note {
  font-size: 0.75rem;
  color: rgba(176,190,200,0.45);
  margin-top: 1rem;
  font-style: italic;
}
.required-mark { color: rgba(168,180,192,0.5); margin-left: 1px; }

@media (max-width: 900px) {
  .split        { grid-template-columns: 1fr; }
  .services     { grid-template-columns: 1fr; }
  .cases        { grid-template-columns: 1fr; }
  .layer        { grid-template-columns: 1fr; gap: 0.6rem; }
  .layer__note  { display: none; }
  .nav__links   { display: none; }
  .nav__burger  { display: flex; }
  .footer__nav  { margin-left: 0; }
  .footer__email { margin-left: 0; }
  .contact-paths { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 90vh; }
}