/* =============================================================
   Digital Mindshare LLC — Design System
   Single source of truth for all visual decisions.
   ============================================================= */

/* -------------------------------------------------------------
   Monologue (licensed, local)
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Monologue';
  src: url('/fonts/monologue-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   Google Fonts
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* -------------------------------------------------------------
   Tokens
   ------------------------------------------------------------- */
:root {
  /* Colors */
  --primary:       #2a4e61;
  --primary-dark:  #1d3a4a;
  --primary-mid:   #35627a;
  --steel:         #4c6b7b;
  --border:        #d8dde2;
  --border-light:  #e8ecf0;
  --bg-warm:       #eef1f4;
  --charcoal:      #424b54;
  --gray:          #5f666f;
  --white:         #ffffff;

  /* Accent, added 2026-09-20. Rust, picked by Gene from a live comparison.
     Three shades because contrast requirements differ by use:
     --accent       borders, rules, the FAQ plus sign (needs 3:1, not text)
     --accent-text  label and link text (4.5:1 on white AND on --bg-warm)
     --accent-deep  button fill, white text on it at 6.08:1 */
  --accent:        #c4553d;
  --accent-text:   #b64a33;
  --accent-deep:   #a8412b;

  /* Typography */
  --font-heading:  'Oswald', sans-serif;
  --font-body:     'Open Sans', sans-serif;
  --h1:            clamp(41px, 6.4vw, 84px);
  --h2:            clamp(29px, 3.94vw, 41px);
  --h3:            25px;
  --body:          18px;
  --small:         17px;
  --label-size:    16px;

  /* Letter spacing */
  --ls-label:      0.12em;
  --ls-heading:    0.02em;

  /* Line heights */
  --lh-display:    1.1;
  --lh-heading:    1.25;
  --lh-body:       1.65;

  /* Spacing */
  --container:         1040px;
  --container-narrow:  720px;
  --container-tight:   680px;
  --sec-pad:           40px;
  --gap-sm:            12px;
  --gap-md:            20px;
  --gap-lg:            56px;
}

/* -------------------------------------------------------------
   Reset & Base
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Links inside running text carry the accent AND an underline. Navy on charcoal
   with no underline was invisible: nothing on the page told a reader what was
   clickable, and hover does nothing on a touchscreen. Nav links, buttons and
   card links are excluded because they have their own treatment. */
.who a,
.faq-answer a,
.page-hero__sub a,
.invitation a,
.legal-page a,
.about-cred a {
  color: var(--accent-text);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.who a:hover,
.faq-answer a:hover,
.page-hero__sub a:hover,
.invitation a:hover,
.legal-page a:hover,
.about-cred a:hover {
  color: var(--accent-deep);
  text-decoration: underline solid;
  text-decoration-thickness: 2px;
}

ul {
  list-style: none;
}

/* Scroll offset for sticky nav */
#top, #stack, #who, #talk {
  scroll-margin-top: 80px;
}

/* -------------------------------------------------------------
   Container
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--tight {
  max-width: var(--container-tight);
}

/* -------------------------------------------------------------
   Typography helpers
   ------------------------------------------------------------- */
.label {
  font-family: var(--font-body);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 16px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--primary);
}

h1 {
  font-size: var(--h1);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--h2);
  font-weight: 600;
}

h3 {
  font-size: var(--h3);
  font-weight: 600;
}

p {
  margin-bottom: 1em;
}

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

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-deep);
  color: var(--white);
  border: 1.5px solid var(--accent-deep);
}

.btn-primary:hover {
  background: var(--accent-text);
  border-color: var(--accent-text);
  text-decoration: none;
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--steel);
  border: 1.5px solid var(--border);
}

.btn-ghost:hover {
  color: var(--primary);
  border-color: var(--primary);
  text-decoration: none;
}

/* -------------------------------------------------------------
   Header / Nav
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  height: 72px;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s;
}

.site-header.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.nav-cta {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary);
  border-radius: 2px;
  padding: 8px 18px;
  transition: background 0.15s, color 0.15s !important;
}

.nav-cta:hover {
  background: var(--primary) !important;
  color: var(--white) !important;
  text-decoration: none;
}

/* -------------------------------------------------------------
   Hero Section (#top)
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 78vh;
  background: var(--white);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px; /* header height */
}

.hero__owl {
  position: absolute;
  right: 0;
  top: 0;
  width: 44%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero__owl img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 0.09;
}

.hero__content {
  position: relative;
  z-index: 1;
  /* Scales with the viewport instead of stepping once. 65vw keeps the column
     wide enough for the headline to hold two lines at its largest size. */
  max-width: clamp(520px, 65vw, 992px);
  padding: var(--sec-pad) 0;
}

.hero__headline {
  /* Even out the lines instead of leaving a one-word orphan on the last one. */
  text-wrap: balance;
  font-family: 'Monologue', var(--font-heading);
  font-size: var(--h1);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-display);
  max-width: 100%;
  margin-bottom: clamp(20px, 1.8vw, 32px);
}

.hero__body {
  /* Capped separately: a long line of body copy is harder to read than a long
     headline, so this stops growing well before the column does. */
  max-width: min(560px, 100%);
  margin-bottom: clamp(28px, 2.6vw, 48px);
  color: var(--charcoal);
  font-size: clamp(18px, 1.15vw, 21px);
}

.hero__body p {
  margin-bottom: 12px;
}

.hero .label {
  font-size: clamp(16px, 1vw, 18px);
}

.hero .btn {
  font-size: clamp(15px, 0.95vw, 17px);
  padding: clamp(13px, 1vw, 17px) clamp(28px, 2.2vw, 38px);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* -------------------------------------------------------------
   Section defaults
   ------------------------------------------------------------- */
.section {
  padding: var(--sec-pad) 0;
}

/* Collapse the top pad when a plain section stacks on a plain section,
   so same-background sections don't double their vertical gap. */
.section:not(.section--warm) + .section:not(.section--warm) {
  padding-top: 0;
}

.section--warm {
  background: var(--bg-warm);
}

.section--divided {
  border-top: 1px solid var(--border);
}

.section-header {
  margin-bottom: 16px;
}

.section-header h2 {
  margin-top: 0;
}

.about-identity {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin: 4px 0 28px;
}

.about-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.about-name {
  font-family: var(--font-heading);
  font-size: 23px;
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  margin: 0 0 4px;
}

.about-title {
  font-size: var(--small);
  color: var(--steel);
  margin: 0 0 6px;
}

.about-cred {
  font-size: var(--small);
  color: var(--gray);
  line-height: 1.5;
  margin: 0 0 10px;
}

.quote {
  margin: var(--gap-lg) 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--primary);
}

.quote__text {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  font-style: italic;
  margin: 0 0 10px;
}

.quote__cite {
  display: block;
  font-style: normal;
  font-size: var(--small);
  color: var(--steel);
}

.quote + p {
  margin-top: var(--gap-lg);
}

.quote__more {
  font-size: var(--small);
  margin: 12px 0 0;
}

.about-link {
  display: block;
  font-size: var(--small);
  color: var(--primary);
  text-decoration: underline;
}

.about-link + .about-link {
  margin-top: 6px;
}

/* -------------------------------------------------------------
   Stripped single-scroll beats
   ------------------------------------------------------------- */
.recognition {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.recognition li {
  position: relative;
  font-size: var(--body);
  line-height: 1.5;
  color: var(--charcoal);
  padding: 16px 0 16px 26px;
  border-top: 1px solid var(--border);
}

.recognition li:last-child {
  border-bottom: 1px solid var(--border);
}

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

.who > p {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin-bottom: 20px;
}

.recognition + .who {
  margin-top: var(--gap-md);
}

.recognition + p {
  margin-top: var(--gap-md);
}

.phase {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-transform: none;
  cursor: help;
  position: relative;
  border-bottom: 1px dotted var(--steel);
}

.phase::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: min(280px, 78vw);
  background: var(--primary-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  padding: 10px 12px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.phase:hover::after,
.phase:focus::after,
.phase:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.phase:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.faq {
  margin-top: 8px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  padding: 12px 2px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  transition: color 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--primary-dark);
}

.faq-answer {
  padding: 0 2px var(--gap-md);
}

.faq-answer p {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin: 0 0 var(--gap-md);
  max-width: 64ch;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.invitation {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin: 0 0 16px;
}

.invitation__close {
  font-family: var(--font-heading);
  font-size: 29px;
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  margin: 0;
}

.invitation__offer {
  font-size: var(--small);
  color: var(--steel);
  margin: 10px 0 0;
}

.req-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--steel);
  text-transform: uppercase;
}

.reg {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* -------------------------------------------------------------
   Contact Section (#contact)
   ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: flex-start;
}

.contact-heading h2 {
  font-size: clamp(36px, 4.5vw, 54px);
  margin-bottom: 16px;
}

.contact-heading p {
  color: var(--charcoal);
  max-width: 400px;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.form-group input,
.form-group textarea,
.form-group select {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 14px;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8ea0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-submit {
  margin-top: 4px;
}

/* Form success state */
.form-success {
  display: none;
  padding: 48px 24px;
  text-align: center;
  color: var(--primary);
  font-weight: 600;
}
.form-success p {
  margin: 0 0 8px;
  line-height: 1.5;
}
.form-success p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  padding: 28px 0;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-logo img {
  height: 28px;
  width: auto;
  opacity: 0.7;
}

.footer-legal {
  font-size: 14px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The copyright takes the whole first line so every link sits together on the
   second one. Predictable at any width, instead of one link orphaning itself
   when the row runs out of room. */
.footer-legal > span:first-child {
  flex: 0 0 100%;
}

/* No link breaks mid-phrase. "Do Not Sell or Share My Personal Information" is
   the wording California asks for, so it is long and has to stay whole. */
.footer-legal > a,
.footer-legal > button {
  white-space: nowrap;
}

/* A bar between the links. Without it four links in a row read as one run of
   text. Drawn as a 1px box rather than a glyph, so its height and weight are
   set here instead of inherited from the font, and it needs no extra markup
   and cannot be tabbed to. A middle dot was tried first and was too small to
   do the job at 14px. */
.footer-legal > a + a::before,
.footer-legal > button::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  vertical-align: -0.1em;
  background: var(--gray);
  margin-right: 14px;
}

/* On a phone the long CCPA link cannot share a line with anything, so give each
   link its own row and drop the bars, which only make sense side by side.
   480px, not 420px: at 420 the row layout came back on a 430px phone (iPhone
   Pro Max) and the stacked padding went with it, dropping every footer tap
   target to 23px. Measured 2026-09-21. 480 keeps the stacked, 43px version on
   every phone and hands the row layout to tablets and up. */
@media (max-width: 480px) {
  /* Both logos are links, and at 28px and 36px they were under a thumb-sized
     target. Padding gets them to 44 without moving the artwork. */
  .footer-logo,
  .site-logo {
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Stacked on a phone these are the only tap targets down here, and at 23px
     they were too small to hit. Padding brings each to roughly 44px without
     changing how they look. */
  .footer-legal > a,
  .footer-legal > button {
    white-space: normal;
    padding: 10px 0;
  }

  .footer-legal > a + a::before,
  .footer-legal > button::before {
    content: none;
  }
}

.footer-legal a {
  color: var(--gray);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--primary);
}

/* Cookie preferences control. A button because it performs an action rather
   than navigating; styled to sit inline with its sibling links. */
.footer-link-button {
  font: inherit;
  color: var(--gray);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.footer-link-button:hover {
  color: var(--primary);
}

/* -------------------------------------------------------------
   Legal Pages (Privacy, Terms)
   ------------------------------------------------------------- */
.legal-page {
  padding-top: calc(72px + var(--sec-pad));
  padding-bottom: var(--sec-pad);
}

.legal-page .container {
  max-width: 760px;
}

/* /for-ai/ lists full URLs as text. Without this they refuse to break and push
   the page wider than a phone screen. */
.legal-page a,
.legal-page li,
.legal-page p {
  overflow-wrap: anywhere;
}

.legal-page h1 {
  font-size: clamp(32px, 4.5vw, 45px);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.legal-page .effective-date {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 48px;
  display: block;
}

.legal-page h2 {
  font-size: 23px;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--primary);
}

.legal-page h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--charcoal);
  font-family: var(--font-body);
  letter-spacing: 0;
}

.legal-page p {
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 1.7;
}

.legal-page ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-page ul li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 6px;
}

.legal-page strong {
  color: var(--charcoal);
  font-weight: 700;
}

.legal-page a {
  color: var(--primary);
  text-decoration: underline;
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --sec-pad: 32px;
  }

  .hero__owl {
    width: 80%;
    opacity: 0.06;
  }

  .hero__content {
    max-width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__ctas .btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   MULTI-PAGE ARCHITECTURE (added 2026-09-19)
   Nav, inner-page hero, service cards, form select.
   Tokens only. Nothing hardcoded that :root already defines.
   ============================================================ */

/* ---- Site navigation -------------------------------------
   main.js already binds #nav-toggle and #site-nav; only the
   markup and these styles were missing. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

/* The wordmark does not sit in the middle of the logo file: the owl rises above
   it, so "DIGITAL MINDSHARE" occupies 42% to 88% of the image height, measured
   by scanning the PNG. Centering the image and the nav against each other
   therefore leaves the nav about 8px above the middle of the wordmark. This
   centers the nav's cap height on the wordmark's. Measured at a 36px logo and
   16px Oswald nav, so re-measure if either changes. Desktop only, because the
   mobile nav is an absolutely positioned dropdown. */
@media (min-width: 861px) {
  .site-nav {
    transform: translateY(7.8px);
  }
}

.site-nav a {
  font-family: var(--font-heading);
  font-size: var(--label-size);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  padding: var(--gap-sm) 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.site-nav a.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: var(--primary);
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    padding: var(--gap-md) 0;
    display: none;
  }

  .site-nav.open { display: flex; }

  .site-nav a {
    width: 100%;
    padding: var(--gap-sm) var(--gap-md);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.active {
    border-bottom: 0;
    border-left-color: var(--primary);
    background: var(--bg-warm);
  }
}

/* ---- Inner-page hero -------------------------------------
   The home hero is full-viewport with the owl watermark. Inner
   pages need a shorter one that clears the fixed 72px header. */
.page-hero {
  background: var(--bg-warm);
  border-bottom: 3px solid var(--accent);
  padding: calc(72px + var(--sec-pad)) 0 var(--sec-pad);
}

.page-hero__headline {
  text-wrap: balance;
  font-family: var(--font-heading);
  font-size: var(--h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  margin: var(--gap-sm) 0 var(--gap-md);
}

.page-hero__sub {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  max-width: var(--container-tight);
  margin: 0 0 var(--gap-md);
}

/* ---- Service cards on the home page ----------------------
   Equal weight is the point. A reader who needs the retainer
   should not have to scroll past the assessment to find it. */
.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: var(--gap-lg) var(--gap-md);
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  margin: 0 0 var(--gap-md);
}

.service-card p {
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  margin: 0 0 var(--gap-md);
}

/* The line that tells a reader which of the two is theirs. A real CMO read both
   cards, understood them, and still could not choose without diagnosing her own
   situation first. */
.service-card__pick {
  border-top: 1px solid var(--border-light);
  padding-top: var(--gap-md);
  margin-bottom: var(--gap-md);
}

.service-card__pick strong {
  color: var(--accent-text);
}

.service-card__link {
  font-family: var(--font-heading);
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 2px;
}

.service-card__link:hover,
.service-card__link:focus-visible {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

@media (max-width: 760px) {
  .service-cards {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
}

/* ---- Contact form select and hint ------------------------ */
.contact-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--body);
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  padding: var(--gap-sm);
}

.contact-form select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--small);
  color: var(--gray);
}