/* ============================================================
   DND Business Solutions — stylesheet
   Design system from Figma
   ============================================================ */

:root {
  --navy:        #182438;
  --navy-deep:   #152a59;
  --blue:        #2248b7;
  --blue-tint:   #e9eef9;
  --blue-light:  #cad6f3;
  --gray:        #646c79;
  --border:      #d7dad9;
  --cream:       #f7f6f2;
  --white:       #ffffff;

  --maxw: 1440px;
  --pad: 80px;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--navy);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- Shared typography ---------- */
.eyebrow {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--light { color: var(--blue-light); }

.section-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.13;
  color: var(--navy);
}
.section-heading--light { color: var(--white); }

.lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray);
}

.fine-print {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray);
}

.muted-note {
  font-size: 12px;
  color: var(--gray);
}

.divider {
  height: 1px;
  width: 100%;
  background: var(--border);
}
.divider--light { background: rgba(255,255,255,0.19); }

/* ---------- Icons (Lucide, rendered via mask so they inherit color) ---------- */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  flex-shrink: 0;
}
.icon--arrow {
  color: var(--white);
  -webkit-mask-image: url('assets/icons/arrow-up-right.svg');
  mask-image: url('assets/icons/arrow-up-right.svg');
}
.icon--arrow-blue {
  color: var(--blue);
  -webkit-mask-image: url('assets/icons/arrow-up-right.svg');
  mask-image: url('assets/icons/arrow-up-right.svg');
}
.icon--compass {
  width: 24px; height: 24px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/compass.svg');
  mask-image: url('assets/icons/compass.svg');
}
.icon--workflow {
  width: 24px; height: 24px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/workflow.svg');
  mask-image: url('assets/icons/workflow.svg');
}
.icon--move {
  width: 24px; height: 24px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/move-up-right.svg');
  mask-image: url('assets/icons/move-up-right.svg');
}
.icon--flag {
  width: 28px; height: 28px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/flag.svg');
  mask-image: url('assets/icons/flag.svg');
}
.icon--layers {
  width: 28px; height: 28px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/layers.svg');
  mask-image: url('assets/icons/layers.svg');
}
.icon--trending {
  width: 28px; height: 28px; color: var(--blue);
  -webkit-mask-image: url('assets/icons/trending-up.svg');
  mask-image: url('assets/icons/trending-up.svg');
}
.icon--messages {
  width: 38px; height: 38px; color: var(--white);
  -webkit-mask-image: url('assets/icons/messages-square.svg');
  mask-image: url('assets/icons/messages-square.svg');
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  height: 54px;
  padding: 0 23px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: #1c3c9b; }
.btn--white { background: var(--white); color: var(--blue); }
.btn--white:hover { background: #eef1f8; }
.btn--outline { background: transparent; color: var(--blue); border-color: var(--border); }
.btn--outline:hover { border-color: var(--blue); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}
.link-arrow:hover { gap: 14px; }

/* ---------- Brand / monogram ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand__mono {
  width: 52px; height: 52px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand__words { display: flex; flex-direction: column; gap: 3px; }
.brand__name { font-size: 16px; color: var(--navy); }
.brand__desc { font-size: 12px; color: var(--gray); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links > a:not(.btn) {
  font-size: 14px;
  color: var(--navy);
  transition: color .15s ease;
}
.nav__links > a:not(.btn):hover { color: var(--blue); }

/* ============================================================
   HERO
   ============================================================ */
.hero__inner {
  display: flex;
  gap: 80px;
  align-items: center;
  padding-top: 74px;
  padding-bottom: 64px;
}
.hero__intro {
  width: 640px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 1.05;
  color: var(--navy);
}
.hero__headline .accent { color: var(--blue); }
.hero__supporting {
  width: 510px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hero__actions {
  display: flex;
  gap: 24px;
  align-items: center;
}
.hero__visual {
  width: 560px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.hero__photo { height: 466px; width: 100%; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
  background: var(--blue);
  display: flex;
  gap: 24px;
  padding: 28px;
}
.hero__caption-marker {
  font-size: 12px;
  color: var(--blue-light);
  flex-shrink: 0;
  white-space: nowrap;
}
.hero__caption-text {
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1.2;
  color: var(--white);
}

/* ============================================================
   BUSINESS PRIORITIES
   ============================================================ */
.priorities { background: var(--blue-tint); }
.priorities__inner {
  display: flex;
  gap: 52px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}
.priorities__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--navy);
  width: 240px;
  flex-shrink: 0;
}
.priority {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}
.priority__details { display: flex; flex-direction: column; gap: 8px; }
.priority__title { font-weight: 600; font-size: 15px; color: var(--navy); }
.priority__sub { font-size: 13px; line-height: 1.5; color: var(--gray); }

/* ============================================================
   SERVICES
   ============================================================ */
.services__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  padding-top: 96px;
  padding-bottom: 96px;
}
.services__intro {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.services__list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.service {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 29px 0;
  border-top: 1px solid var(--border);
  transition: background-color .15s ease;
}
.service:hover { background: rgba(34,72,183,0.03); }
.service:hover .service__arrow { transform: translate(3px,-3px); }
.service__num { font-size: 13px; color: var(--blue); width: 34px; flex-shrink: 0; }
.service__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.service__title { font-weight: 500; font-size: 24px; color: var(--navy); }
.service__desc { font-size: 15px; line-height: 1.65; color: var(--gray); }
.service__scope { font-size: 11px; color: var(--blue); }
.service__arrow { transition: transform .18s ease; }

/* ============================================================
   WHO WE HELP
   ============================================================ */
.who { background: var(--white); }
.who__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.who__heading { display: flex; gap: 80px; align-items: flex-end; }
.who__heading-content { width: 760px; display: flex; flex-direction: column; gap: 20px; }
.who__heading-desc { flex: 1 0 0; min-width: 0; font-size: 15px; line-height: 1.65; color: var(--gray); }
.who__stages { display: flex; gap: 24px; align-items: stretch; }
.stage {
  background: var(--cream);
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
}
.stage__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.stage__title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--navy); }
.stage__desc { font-size: 15px; line-height: 1.65; color: var(--gray); }
.stage__needs { font-size: 12px; color: var(--gray); margin-top: auto; }

/* ============================================================
   OUR APPROACH
   ============================================================ */
.approach { background: var(--navy-deep); }
.approach__inner {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding-top: 96px;
  padding-bottom: 96px;
}
.approach__intro { display: flex; gap: 110px; align-items: flex-end; }
.approach__heading-content { width: 720px; display: flex; flex-direction: column; gap: 22px; }
.approach__desc { flex: 1 0 0; min-width: 0; font-size: 17px; line-height: 1.65; color: var(--blue-light); }
.approach__steps { display: flex; gap: 32px; align-items: flex-start; }
.step { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.step__num { font-family: var(--serif); font-size: 40px; color: var(--blue-light); }
.step__title { font-weight: 500; font-size: 23px; color: var(--white); }
.step__desc { font-size: 15px; line-height: 1.65; color: var(--blue-light); }
.step__output { font-size: 12px; line-height: 1.5; color: var(--white); }

/* ============================================================
   PRACTICAL DELIVERABLES
   ============================================================ */
.deliverables__inner {
  display: flex;
  gap: 88px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}
.roadmap {
  background: var(--blue-tint);
  width: 600px;
  flex-shrink: 0;
  height: 510px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 44px;
}
.roadmap__doc {
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  box-shadow: 0 12px 32px rgba(22,45,96,0.07);
}
.roadmap__header { display: flex; align-items: center; justify-content: space-between; }
.roadmap__brand { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--blue); }
.roadmap__header .icon { width: 22px; height: 22px; }
.roadmap__title { display: flex; flex-direction: column; gap: 8px; }
.roadmap__title-main { font-family: var(--serif); font-size: 30px; color: var(--navy); }
.roadmap__title-sub { font-size: 12px; color: var(--gray); }
.roadmap__priority { display: flex; gap: 16px; align-items: center; }
.roadmap__marker {
  width: 32px; height: 32px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.roadmap__summary { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.roadmap__priority-title { font-weight: 500; font-size: 14px; color: var(--navy); }
.roadmap__line { height: 4px; background: var(--blue-tint); display: block; max-width: 100%; }
.roadmap__note { background: var(--cream); padding: 14px; }
.roadmap__note p { font-size: 12px; color: var(--gray); }
.roadmap__disclaimer { font-size: 11px; letter-spacing: 0.04em; color: var(--gray); }

.deliverables__story { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.deliverable { display: flex; flex-direction: column; gap: 8px; }
.deliverable__title { font-weight: 600; font-size: 17px; color: var(--navy); }
.deliverable__desc { font-size: 14px; line-height: 1.65; color: var(--gray); }

/* ============================================================
   THE DND PARTNERSHIP
   ============================================================ */
.partnership { background: var(--white); }
.partnership__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.partnership__intro { display: flex; gap: 80px; align-items: flex-end; }
.partnership__heading-content { width: 780px; display: flex; flex-direction: column; gap: 20px; }
.partnership__desc { flex: 1 0 0; min-width: 0; font-size: 15px; line-height: 1.65; color: var(--gray); }
.partnership__principles { display: flex; gap: 40px; align-items: flex-start; }
.principle { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.principle__title { font-weight: 500; font-size: 21px; color: var(--navy); }
.principle__desc { font-size: 15px; line-height: 1.65; color: var(--gray); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__inner {
  display: flex;
  gap: 100px;
  align-items: flex-start;
  padding-top: 96px;
  padding-bottom: 96px;
}
.faq__intro { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.faq__answers { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.qa { display: flex; flex-direction: column; }
.qa__content { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; }
.qa__q { font-weight: 500; font-size: 18px; color: var(--navy); }
.qa__a { font-size: 14px; line-height: 1.65; color: var(--gray); }

/* ============================================================
   CTA — DISCUSS YOUR BUSINESS
   ============================================================ */
.cta { background: var(--blue); }
.cta__inner {
  display: flex;
  gap: 120px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}
.cta__invitation { width: 800px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.cta__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.13;
  color: var(--white);
}
.cta__copy { width: 640px; display: flex; flex-direction: column; gap: 30px; }
.cta__desc { font-size: 17px; line-height: 1.65; color: var(--blue-light); }
.cta__prompts {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.cta__prompts-heading { font-weight: 600; font-size: 15px; color: var(--white); }
.cta__prompt { font-size: 14px; line-height: 1.5; color: var(--blue-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--cream); }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 32px;
}
.footer__nav { display: flex; align-items: flex-start; justify-content: space-between; }
.footer__brand { width: 450px; display: flex; flex-direction: column; gap: 24px; }
.footer__purpose { font-size: 14px; line-height: 1.6; color: var(--gray); width: 340px; }
.footer__explore { width: 190px; display: flex; flex-direction: column; gap: 16px; }
.footer__explore a { font-size: 14px; color: var(--navy); transition: color .15s ease; }
.footer__explore a:hover { color: var(--blue); }
.footer__heading { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.footer__next { width: 400px; display: flex; flex-direction: column; gap: 20px; }
.footer__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--navy);
  transition: color .15s ease;
}
.footer__contact:hover { color: var(--blue); }
.footer__domain { font-size: 14px; color: var(--blue); }
.footer__baseline { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  :root { --pad: 48px; }
  .hero__headline { font-size: 68px; }
  .section-heading { font-size: 44px; }
  .cta__headline { font-size: 52px; }
  .hero__intro,
  .hero__visual { width: auto; flex: 1 1 0; }
  .hero__supporting,
  .cta__copy { width: 100%; }
  .who__heading-content,
  .approach__heading-content,
  .partnership__heading-content,
  .cta__invitation { width: auto; flex: 1 1 0; }
  .approach__intro { gap: 48px; }
}

@media (max-width: 960px) {
  .nav__links { gap: 20px; }
  .nav__links a:not(.btn) { display: none; }

  .hero__inner,
  .services__inner,
  .deliverables__inner,
  .faq__inner,
  .cta__inner { flex-direction: column; gap: 48px; align-items: stretch; }

  .hero__visual,
  .services__intro,
  .faq__intro,
  .cta__invitation,
  .roadmap { width: 100%; }

  .roadmap { height: auto; }

  .priorities__inner { flex-wrap: wrap; gap: 32px; }
  .priorities__title { width: 100%; }
  .priority { flex: 1 1 240px; }

  .who__heading,
  .approach__intro,
  .partnership__intro { flex-direction: column; align-items: flex-start; gap: 20px; }

  .who__stages { flex-wrap: wrap; }
  .stage { flex: 1 1 260px; }

  .approach__steps { flex-wrap: wrap; }
  .step { flex: 1 1 220px; }

  .partnership__principles { flex-wrap: wrap; }
  .principle { flex: 1 1 260px; }

  .cta__prompts { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 28px; }

  .footer__nav { flex-wrap: wrap; gap: 40px; }
  .footer__brand { width: 100%; }
}

@media (max-width: 600px) {
  :root { --pad: 24px; }
  .nav__inner { height: 80px; }
  .hero__headline { font-size: 48px; }
  .section-heading { font-size: 34px; }
  .cta__headline { font-size: 38px; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; }
  .services__inner,
  .who__inner,
  .approach__inner,
  .deliverables__inner,
  .partnership__inner,
  .faq__inner,
  .cta__inner { padding-top: 56px; padding-bottom: 56px; }
  .who__stages { flex-direction: column; }
  .approach__steps { flex-direction: column; }
  .partnership__principles { flex-direction: column; }
  .service__title { font-size: 20px; }
  .footer__baseline { flex-direction: column; gap: 8px; }
  .btn { gap: 16px; }
}