/* Vinther Consulting · forsiden: hero, grunde, hold, brancher, Martins note og kontaktbånd */

/* Forsidens hero med foto og pilot-til-drift-linjen */
.hero { position: relative; background: #CFE3F2; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 25%; }
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  height: clamp(720px, 52vw, 860px);
}
.hero__copy {
  grid-column: 2;
  display: grid;
  gap: 20px;
  padding-top: clamp(40px, 5.5vw, 88px);
  padding-left: clamp(0px, 2vw, 32px);
  max-width: 620px;
}
.hero .eyebrow { color: var(--ink-2); }
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 3.5vw, 4.4rem); }
.hero .lead { color: var(--ink-2); max-width: 34rem; }
.hero .actions { margin-top: 6px; }
.hero__caption {
  position: absolute;
  left: var(--gutter-l);
  bottom: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  color: #FFFFFF;
  background: rgba(28, 34, 54, 0.78);
  padding: 6px 12px;
  border-radius: 999px;
}

.motif { width: 100%; max-width: 530px; height: auto; margin-top: 8px; overflow: visible; }
.motif__dash { stroke: #6E7D97; stroke-width: 2; stroke-dasharray: 4 4 4 4 4 20; }
.motif__pilot { fill: #D2E5F3; stroke: #5E6F8C; stroke-width: 2; }
.motif__run {
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: motif-run 1.5s cubic-bezier(.3, .7, .2, 1) 0.35s both;
}
.motif__start, .motif__end { fill: var(--green); }
.motif__ring {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: motif-ring 0.7s ease-out 1.6s both;
}
.motif__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.4px;
  fill: #34425E;
}
.motif__label--drift { fill: var(--green); }

@keyframes motif-run { from { stroke-dashoffset: 0.55; } to { stroke-dashoffset: 0; } }
@keyframes motif-ring { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 0.4; } }

@media (max-width: 1080px) {
  .hero { background: var(--sky); }
  .hero__media { position: relative; aspect-ratio: 1 / 1; max-height: 62vh; width: 100%; }
  .hero__media img { object-position: 22% 35%; }
  .hero__inner { display: block; height: auto; }
  .hero__copy { padding: 36px 0 56px; max-width: 640px; }
  .hero__caption { display: none; }
  .motif__pilot { fill: var(--sky); }
}

/* Det, vi ser: tre grunde til, at piloter bliver hængende */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.reasons > div { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px dashed #9AA5BA; }
.reasons p { color: var(--ink-2); }
.verdict {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 4px solid var(--green);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.3;
  max-width: 30ch;
}
@media (max-width: 860px) {
  .reasons { grid-template-columns: 1fr; gap: 28px; }
}

/* Holdet på navy */
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.team__copy { display: grid; gap: 18px; }
.team__copy p:not(.eyebrow) { color: var(--on-navy); max-width: 52ch; }
.crew { background: var(--navy-2); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 26px; }
.crew__group { display: grid; gap: 12px; }
.crew__group + .crew__group { padding-top: 24px; border-top: 1px solid var(--navy-line); }
.crew__lead { display: flex; gap: 16px; align-items: center; }
.crew__lead img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 40%; flex: none; border: 2px solid var(--green-bright); }
.crew__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.crew__role { color: var(--on-navy-2); font-size: 1rem; }
@media (max-width: 900px) {
  .team { grid-template-columns: 1fr; }
}

/* Brancher */
.sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sectors > div { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--ink); }
.sectors p { color: var(--ink-2); font-size: 1.02rem; }
.sectors .small { margin-top: 4px; }
@media (max-width: 980px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sectors { grid-template-columns: 1fr; } }

/* Martins note */
.note { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.note__photo { background: var(--sky); border-radius: var(--radius); overflow: hidden; max-width: 420px; aspect-ratio: 4 / 5; }
.note__photo img { width: 100%; height: 100%; object-fit: cover; }
.note__body { display: grid; gap: 20px; }
.note blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 38ch;
  text-wrap: pretty;
}
.note__sign { font-family: var(--font-display); }
.note__sign b { display: block; font-weight: 600; }
.note__sign span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 860px) {
  .note { grid-template-columns: 1fr; }
  .note__photo { max-width: 320px; }
}

/* Kontaktbånd */
.cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 64px; align-items: end; }
.cta__copy { display: grid; gap: 16px; }
.cta__copy p { color: var(--ink-2); max-width: 46ch; }
.cta__contact { display: grid; gap: 14px; justify-items: start; }
.cta__line { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; }
.cta__line a { color: var(--ink); text-decoration: none; }
.cta__line a:hover { color: var(--green); text-decoration: underline; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* Forbehold under konklusionen og navnelinjen under erfaringen */
.verdict-note { margin-top: 12px; color: var(--ink-2); max-width: 56ch; }
.names-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink-2);
}
.note__text {
  font-size: clamp(1.18rem, 1.06rem + 0.4vw, 1.36rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 44ch;
  text-wrap: pretty;
}