/* NXSTEP Executive Search Consultants: site styles */

:root {
  --ink:      #0d1114;
  --ink-soft: #3d474e;
  --muted:    #6b767d;
  --line:     #e2e6e9;
  --line-soft:#eef1f3;
  --paper:    #ffffff;
  --wash:     #f6f8f9;
  --deep:     #0f1a22;
  --blue:     #0071bc;
  --blue-dark:#00568e;
  --grey:     #808080;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Justified body copy with hyphenation so lines end flush on both edges */
.card p,
.panel p,
.step p,
.wrap.narrow p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

/* Narrow measure for readability, anchored to the container's left edge so it
   lines up with headlines set in the full-width container above it. */
.wrap.narrow > * { max-width: 820px; }

/* ---------- Header ---------- */

.site-header {
  border-bottom: none;
  background: rgba(15,26,34,0.97);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 106px;
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 62px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav a {
  color: #a9b7c0;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: #fff; text-decoration: none; }
.nav a.active { color: #fff; border-bottom-color: var(--blue); }

.nav-cta {
  display: inline-block;
  background: var(--deep);
  color: #fff !important;
  padding: 11px 22px !important;
  border-radius: 3px;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: none !important;
}
.nav-cta:hover { background: var(--blue-dark); text-decoration: none !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 3px;
  padding: 9px 12px;
  cursor: pointer;
  color: #fff;
  font-size: 0.9rem;
}

/* ---------- Sections ---------- */

section { padding: 72px 0 84px; }
.section-wash { background: var(--wash); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-tight { padding: 60px 0; }

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 16px;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.section-head { max-width: 720px; margin-bottom: 52px; }

/* ---------- Hero ---------- */

.hero {
  padding: 104px 0 52px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}

.hero .wrap { position: relative; z-index: 2; }

.hero-mark {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 440px;
  height: 440px;
  z-index: 1;
  pointer-events: none;
}

.hero h1 { max-width: 15ch; }

.hero .lede { max-width: 60ch; font-size: 1.26rem; margin-top: 26px; }

.hero-rule {
  width: 64px;
  height: 3px;
  background: var(--blue);
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 3px;
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--deep); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); text-decoration: none; color: #fff; }

.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); text-decoration: none; }

/* ---------- Credibility strip ---------- */

.strip {
  background: var(--deep);
  color: #c8d2d9;
  padding: 0;
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.strip-item {
  padding: 40px 34px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.strip-item:first-child { border-left: none; padding-left: 0; }

.strip-num {
  display: block;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.strip-item p { font-size: 0.95rem; color: #9fadb6; margin: 0; }

/* ---------- Statement band ---------- */

.statement {
  background: var(--deep);
  padding: 78px 0;
}

.statement .rule {
  width: 64px;
  height: 3px;
  background: var(--blue);
  margin-bottom: 28px;
}

.statement p {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0;
  text-align: left;
}

/* ---------- Year mark ---------- */

.year-section { position: relative; overflow: hidden; }
.year-section .wrap { position: relative; z-index: 1; }

.year-mark {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(7rem, 13vw, 12.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #edf1f4;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* ---------- Cards ---------- */

.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 34px 30px;
}

.card-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--blue-dark);
  margin-bottom: 14px;
}

.card p { font-size: 0.98rem; margin-bottom: 0; }

/* ---------- List of roles ---------- */

.roles { list-style: none; margin: 0; padding: 0; }

.roles li {
  padding: 22px 0 22px 30px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.roles li:first-child { border-top: 1px solid var(--line-soft); }

.roles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  width: 12px;
  height: 2px;
  background: var(--blue);
}

.roles strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 3px; }
.roles span { font-size: 0.97rem; }

/* ---------- Two-column split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.panel {
  border-top: 3px solid var(--blue);
  padding-top: 28px;
}

.panel.alt { border-top-color: var(--grey); }

/* ---------- Steps ---------- */

.steps { counter-reset: step; position: relative; }

/* vertical rail connecting the step nodes */
.steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 42px;
  bottom: 42px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}

.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 1;
}
.step:last-child { border-bottom: none; }

.step-n {
  counter-increment: step;
  position: relative;
  padding-left: 28px;
  padding-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue-dark);
}
.step-n::before { content: "0" counter(step); }

/* node on the rail */
.step-n::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wash);
  border: 2px solid var(--blue);
  box-sizing: border-box;
}

.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.98rem; margin-bottom: 0; }

/* ---------- Callout ---------- */

.callout {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  padding: 40px 42px;
}

.callout h2 { font-size: 1.5rem; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.detail { margin-bottom: 30px; }

.detail-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.detail-value {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
}

form { display: block; }

.field { margin-bottom: 20px; }

label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 7px;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,113,188,0.12);
}

textarea { min-height: 150px; resize: vertical; }

.form-note {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 16px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--deep);
  color: #93a2ab;
  padding: 58px 0 34px;
  font-size: 0.93rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  height: 52px;
  width: auto;
  margin-bottom: 20px;
}

.footer-top p { font-size: 0.93rem; color: #93a2ab; max-width: 40ch; }

.footer-head {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #93a2ab; }
.footer-links a:hover { color: #fff; }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.86rem;
  color: #6f7f89;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hero-mark { width: 340px; height: 340px; right: -40px; opacity: 0.85; }
}

@media (max-width: 1080px) {
  .year-mark { display: none; }
}

@media (max-width: 900px) {
  .grid-3, .grid-2, .split, .contact-grid, .footer-top {
    grid-template-columns: 1fr;
  }
  .split, .contact-grid { gap: 44px; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.09); padding: 30px 0; }
  .strip-item:first-child { border-top: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; overflow-x: hidden; }
  /* The eyebrow of the next section should be the last thing visible above the
     fold, with its headline pushed below it. The generous gap under .eyebrow is
     what keeps the headline from peeking through half-cut. */
  section { padding: 38px 0 52px; }
  .section-tight { padding: 38px 0; }
  .hero { padding: 40px 0 38px; }
  .wrap { padding: 0 22px; }

  h1 { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; }
  h2 { font-size: 1.5rem; }
  .hero h1 { max-width: none; }
  .hero .lede { font-size: 1.05rem; margin-top: 20px; }
  .lede { font-size: 1.05rem; }
  .section-head { margin-bottom: 34px; }
  .hero-rule { width: 48px; height: 3px; margin-bottom: 22px; }

  .hero-actions { margin-top: 26px; }
  /* Deliberately not full width. A full-bleed dark button reads as the bottom
     edge of the page and stops the eye from scrolling on. */
  .btn { padding: 15px 30px; }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0f1a22;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .nav a.active { border-bottom-color: rgba(255,255,255,0.1); }
  .nav-cta { text-align: center; margin-top: 12px; }

  .header-inner { position: relative; min-height: 84px; }
  .brand img { height: 46px; }
  .footer-logo { height: 46px; }

  /* Mark moves to the bottom-right corner so it never sits behind the headline */
  .hero-mark {
    width: 170px;
    height: 170px;
    top: auto;
    bottom: -30px;
    right: -34px;
    transform: none;
    opacity: 0.28;
  }

  .callout { padding: 26px 22px; }

  /* rail and nodes are a wide-screen device only */
  .steps::before { display: none; }
  .step-n::after { display: none; }
  .step-n { padding-left: 0; }
  .step { grid-template-columns: 1fr; gap: 4px; padding: 24px 0; }

  .statement { padding: 52px 0; }
  .statement p { font-size: 1.45rem; max-width: none; }
  .statement .rule { margin-bottom: 20px; }

  .year-mark { display: none; }
  .card { padding: 28px 24px; }
  .grid { gap: 22px; }
  .roles li { padding: 18px 0 18px 26px; }
  .roles li::before { top: 28px; }

  .site-footer { padding: 44px 0 28px; }
  .footer-top { gap: 32px; padding-bottom: 30px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 420px) {
  h1 { font-size: 1.8rem; }
  .wrap { padding: 0 18px; }
  .hero-mark { width: 140px; height: 140px; opacity: 0.22; }
  .brand img { height: 40px; }
  .header-inner { min-height: 76px; }
}