/* ============================================================
   AJD Consulting — main stylesheet
   One shared stylesheet for all three pages:
   index.html · services.html · contact.html

   Sections:
     1.  Design tokens ............ color, font, layout variables
     2.  Base & reset ............. global element defaults
     3.  Layout helpers ........... .shell container, top bar
     4.  Header & navigation ...... sticky header, brand mark, links
     5.  Buttons .................. .button / .button.primary
     6.  Homepage hero ............ hero headline, lead, orbit graphic
     7.  Homepage tagline ......... the 3-focus strip under the hero
     8.  Homepage intro ........... "The Partnership" split layout
     9.  Homepage teasers ......... 01/02/03 cards linking to Services
    10.  Page hero (subpages) ..... services + contact page headers
    11.  Services page ............ the six engagement models
    12.  Contact page ............ left info + form card + bottom band
    13.  CTA band ................. navy call-to-action (home + services)
    14.  Footer ................... dark site footer
    15.  Responsive ................ max-width: 800px rules
   ============================================================ */


/* ---------- 1. Design tokens ---------- */

:root {
  --navy: #063b5c;          /* primary / headings / dark sections   */
  --gold: #bd913f;          /* accent / underlines / numbers         */
  --paper: #fdfcf9;         /* page background (warm off-white)      */
  --mist: #eef5f4;          /* alternating section background        */
  --slate: #60717b;         /* body copy on light backgrounds        */
  --line: #d9e2e2;          /* borders / hairlines                   */
  --serif: Georgia, 'Times New Roman', serif;   /* headlines          */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', sans-serif;               /* body / UI text     */
}


/* ---------- 2. Base & reset ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: #153146;
  font: 16px/1.55 var(--sans);
}

/* Remove default link underline; color is inherited from context. */
a { text-decoration: none; color: inherit; }


/* ---------- 3. Layout helpers ---------- */

/* Constrains content to a centered column, 1180px max. */
.shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}

/* Thin navy→gold bar across the very top of every page. */
.top {
  height: 5px;
  background: linear-gradient(90deg, var(--navy) 0 72%, var(--gold) 72%);
}


/* ---------- 4. Header & navigation ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fdfcf9f2;      /* near-opaque paper so content scrolls behind */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font: 700 23px var(--serif);
}

/* The two interlocking rings in the logo mark. */
.mark { width: 41px; height: 29px; position: relative; }
.mark::before,
.mark::after {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  top: 0;
  border: 5px solid;
  border-radius: 50%;
}
.mark::before { border-color: var(--navy); left: 0; }
.mark::after  { border-color: var(--gold); right: 0; }

/* Page links in the header. Current page gets a gold underline. */
.links {
  display: flex;
  gap: 29px;
  font-size: 14px;
  color: #425b68;
}
.links a {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.links a.active,
.links a:hover {
  color: var(--navy);
  border-color: var(--gold);
}

/* Hamburger toggle — hidden on desktop, takes over below 800px. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ccd8d9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;   /* no double-tap-to-zoom delay on phones */
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: 0.22s;
}
/* Morph the three bars into an ✕ while the menu is open. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* "Start a conversation" CTA shown inside the mobile dropdown only. */
.linkcta { display: none; }


/* ---------- 5. Buttons ---------- */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font: 800 14px var(--sans);
  cursor: pointer;
  transition: 0.22s;
}
.button:hover {
  transform: translateY(-2px);
  background: var(--navy);     /* solid version fills on hover */
  color: #fff;
}

/* .primary = solid navy button (used by default CTAs). */
.primary { background: var(--navy); color: #fff; }
.primary:hover {
  background: var(--gold);
  border-color: var(--gold);
}


/* ---------- 6. Homepage hero ---------- */

.hero {
  padding: 104px 0 82px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #fff 0%, #fffdf8 64%, #eef6f5 100%);
}
/* Faint rotated grid pattern in the top-right corner. */
.hero::after {
  content: '';
  position: absolute;
  right: -175px;
  top: -235px;
  width: 650px;
  height: 650px;
  border-radius: 44%;
  background:
    repeating-linear-gradient(0deg,  transparent 0 39px, #063b5c0c 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, #063b5c0c 40px);
  transform: rotate(15deg);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 65px;
  align-items: center;
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.17em;
  color: #456a7a;
  margin-bottom: 18px;
}

/* Shared heading style for the homepage's serif section titles. */
.hero h1,
.intro h2,
.heading h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  letter-spacing: -0.045em;
}
.hero h1 {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.03;
  margin-bottom: 22px;
}
.hero em { color: var(--gold); font-weight: 400; }   /* the gold "better." */

.lead {
  font-size: 20px;
  line-height: 1.55;
  color: #51626d;
  max-width: 640px;
  margin: 0 0 33px;
}

.actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.textlink {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.textlink:hover { color: var(--gold); }

/* Orbit graphic — decorative rings, subtly reactive on hover. */
.orbit { height: 400px; position: relative; }
.ring {
  position: absolute;
  border-radius: 50%;
  transition: 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
}
.a { left: 74px;  top: 54px;  width: 250px; height: 250px; border: 26px solid var(--navy); }
.b { left: 216px; top: 54px;  width: 250px; height: 250px; border: 26px solid var(--gold); }
.c { left: 164px; top: 105px; width: 150px; height: 150px; border: 13px solid #92b9be;
     background: #ffffff88; }
.orbit:hover .a { transform: translate(-15px, -11px) rotate(-12deg); }
.orbit:hover .b { transform: translate(18px, 10px) rotate(12deg); }
.orbit:hover .c { transform: scale(1.13); background: #d9ebeb; }

.center {
  position: absolute;
  z-index: 2;
  top: 151px;
  left: 201px;
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 25px #063b5c22;
}


/* ---------- 7. Homepage tagline ---------- */

.tagline {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tagline .shell {
  min-height: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  text-align: center;
  color: #746340;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tagline b { font-size: 18px; color: var(--gold); }   /* the • separators */


/* ---------- 8. Homepage intro ---------- */

.intro { padding: 94px 0; }

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
}
.intro h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.09; }
.intro p { margin: 0; color: var(--slate); font-size: 18px; }

/* Pull quote block. More specific than ".intro p" above so it wins
 * without needing !important — same effect as the original mockup. */
.intro .position {
  margin-top: 25px;
  border-left: 3px solid var(--gold);
  padding: 16px 0 16px 21px;
  color: #334f5d;
  font-size: 16px;
}


/* ---------- 9. Homepage teasers ---------- */

.teasers { background: var(--mist); padding: 75px 0; }

.heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 35px;
}
.heading h2 {
  font-size: clamp(33px, 4vw, 52px);
  line-height: 1.1;
  max-width: 720px;
}
.heading p {
  max-width: 315px;
  color: var(--slate);
  font-size: 15px;
  margin: 0;
}

/* Three-card grid joining this section to the Services page. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  display: block;
  min-height: 245px;
  background: #fff;
  border: 1px solid #dbe6e5;
  padding: 30px;
  transition: 0.25s;
}
/* Gold top edge grows in from the left on hover. */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.25s;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 36px #063b5c17;
}
.card:hover::before { transform: scaleX(1); }

.num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 800;
}
.card h3 {
  font: 29px/1.1 var(--serif);
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 31px 0 10px;
}
.card p { font-size: 15px; color: var(--slate); margin: 0; }

.more {
  position: absolute;
  bottom: 22px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}


/* ---------- 10. Page hero (subpages) ---------- */

/* Shared header band for services.html and contact.html. */
.pagehero {
  padding: 91px 0 70px;
  background: linear-gradient(120deg, #fff 0%, #f1f7f6 100%);
  border-bottom: 1px solid var(--line);
}
.pagehero h1 {
  margin: 0;
  max-width: 850px;
  color: var(--navy);
  font: clamp(50px, 5vw, 73px)/1.04 var(--serif);
  letter-spacing: -0.045em;
}
.pagehero p {
  max-width: 705px;
  margin: 24px 0 0;
  color: var(--slate);
  font-size: 20px;
}


/* ---------- 11. Services page ---------- */

.services { padding: 83px 0; }

/* One row per engagement model. Columns: number / title / detail. */
.service {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 35px;
  padding: 37px 0;
  border-top: 1px solid var(--line);
  transition: 0.25s;
}
.service:last-of-type { border-bottom: 1px solid var(--line); }
.service:hover {
  padding-left: 16px;
  padding-right: 16px;
  background: #f7faf9;
}

.service-num { color: var(--gold); font: 28px var(--serif); }

.service h2 {
  margin: 0;
  color: var(--navy);
  font: 35px/1.1 var(--serif);
  letter-spacing: -0.035em;
}
.service .summary { margin: 0; color: #365261; font-size: 18px; }
.service .detail { margin: 0; color: var(--slate); font-size: 16px; }
.service .fit { margin-top: 17px; color: #36515f; font-size: 13px; font-weight: 800; }
.service .fit span {
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: 11px;
}

/* Callout under the service list. */
.note {
  margin: 74px 0 0;
  padding: 40px;
  background: var(--mist);
  border-left: 4px solid var(--gold);
  color: #314c5b;
  font-size: 20px;
}
.note strong { color: var(--navy); }


/* ---------- 12. Contact page ---------- */

.contact { padding: 85px 0 104px; }

/* Two columns: intro text on the left, form card on the right. */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 92px;
  align-items: start;
}

.left h2 {
  margin: 0 0 22px;
  color: var(--navy);
  font: clamp(44px, 4vw, 61px)/1.07 var(--serif);
  letter-spacing: -0.045em;
}
.left p { margin: 0; color: var(--slate); font-size: 18px; }

/* Approach / Focus / Location rows. */
.points { margin-top: 38px; border-top: 1px solid var(--line); }
.point {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: #375262;
  font-size: 15px;
}
.point span {
  display: inline-block;
  width: 97px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.formcard {
  background: #fff;
  padding: 43px;
  border: 1px solid #d8e1e1;
  box-shadow: 0 18px 42px #063b5c10;
}
.formcard h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font: 35px/1.12 var(--serif);
  letter-spacing: -0.03em;
}
.small { margin: 0 0 27px; color: var(--slate); font-size: 15px; }

.form { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 12px;
  color: #365464;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field input {
  width: 100%;
  border: 1px solid #ccd8d9;
  background: #fbfcfa;
  padding: 14px;
  color: #153146;
  outline-color: var(--gold);
}
.form .button { justify-self: start; margin-top: 8px; }

/* Shown in place of the form after a successful submit. */
.success {
  display: none;
  padding: 19px 0;
  color: var(--navy);
  font: 29px/1.2 var(--serif);
}
.success span { font: 15px var(--sans); color: var(--slate); }

/* Shown under the button if the AJAX submission fails. */
.error {
  display: none;
  padding: 19px 0;
  color: #7a1f1f;
  font: 29px/1.2 var(--serif);
}
.error span { font: 15px var(--sans); color: var(--slate); }

/* Honeypot: visually hidden, only bots will fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy { font-size: 12px; color: var(--slate); margin: 16px 0 0; }

/* Bottom callout band. */
.band { background: var(--mist); padding: 69px 0; }
.band .shell { display: flex; gap: 46px; align-items: center; }
.band h2 {
  margin: 0;
  color: var(--navy);
  font: 39px/1.12 var(--serif);
  letter-spacing: -0.035em;
  max-width: 490px;
}
.band p { margin: 0; color: var(--slate); font-size: 17px; max-width: 470px; }


/* ---------- 13. CTA band (homepage + services) ---------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 74px 0;
}
/* Oversized ghost letter behind the band's right edge. */
.cta::after {
  content: 'AJD';
  position: absolute;
  right: -15px;
  bottom: -126px;
  color: #ffffff0a;
  font: 250px var(--serif);
}
.cta .shell {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
}
.cta h2 {
  margin: 0;
  max-width: 700px;
  font: clamp(36px, 4vw, 56px)/1.08 var(--serif);
  letter-spacing: -0.04em;
}
.cta p { color: #cbdcdf; max-width: 620px; }
.cta .button {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  white-space: nowrap;
}
.cta .button:hover { background: #fff; border-color: #fff; color: var(--navy); }


/* ---------- 14. Footer ---------- */

footer {
  background: #082c42;
  color: #c5d5d8;
  padding: 29px 0;
  font-size: 13px;
}
.foot { display: flex; justify-content: space-between; gap: 20px; }
.foot .name { color: #fff; font: 19px var(--serif); }


/* ---------- 15. Responsive ---------- */

/* Below 800px: collapse grids, hide nav links, shrink type. */
@media (max-width: 800px) {
  .shell { width: min(100% - 32px, 1180px); }

  .nav { height: 70px; }
  .nav > .button { display: none; }   /* header CTA moves into the menu below */
  .nav-toggle { display: flex; }
  .brand { font-size: 20px; }

  /* Mobile: nav links become a dropdown panel under the header. */
  .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 18px;
    background: #fdfcf9f0;
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 28px 48px #063b5c1c;
  }
  .links.open { display: flex; }
  .links a {
    padding: 13px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .links .linkcta {
    display: block;
    margin-top: 14px;
    padding: 13px 16px;
    border: none;
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    text-align: center;
  }
  .links .linkcta:hover { background: var(--gold); color: #fff; }

  .hero { padding: 64px 0 52px; }
  .hero-grid,
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero h1 { font-size: 47px; }
  .orbit {
    height: 310px;
    transform: scale(0.77);
    transform-origin: left top;
  }
  .tagline .shell { padding: 22px 0; gap: 9px; flex-wrap: wrap; }

  .heading,
  .cta .shell { display: block; }
  .heading p { margin-top: 17px; }
  .grid { grid-template-columns: 1fr; }

  .pagehero { padding: 64px 0 54px; }

  .service {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 28px 0;
  }
  .service:hover { padding-left: 8px; padding-right: 8px; }

  .cta .button { margin-top: 20px; }

  .contact-grid { grid-template-columns: 1fr; gap: 39px; }
  .formcard { padding: 30px 23px; }

  .band .shell { display: block; }
  .band p { margin-top: 18px; }

  .foot { display: block; }
  .foot div + div { margin-top: 8px; }
}