/* Approved COMPASS mobile header treatment.
   Header-only: desktop identity and launchers remain unchanged. */
@media (max-width: 760px) {
  header .topbar,
  header .header-inner,
  header .wrap.nav {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem;
    text-align: center;
  }

  header > .brand {
    align-self: center;
  }

  header .brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    margin-inline: auto !important;
    gap: 0;
    text-align: center;
  }

  header .brand > .brand-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0 auto !important;
    padding: 0;
  }

  header .brand > .brand-seal img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    object-fit: contain;
    transform: none;
  }

  header .brand > .brand-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
  }

  header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
    gap: 0.4rem 0.6rem;
    margin-inline: auto;
  }

  header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Maps direct-header mobile layout */
@media (max-width: 760px) {
  body.maps-page > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
  }
}

/* Keyboard-accessible bypass link */
.compass-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2147483647;
  padding: 0.75rem 1rem;
  background: #fffaf2;
  color: #162635;
  font: bold 1rem/1.4 Arial, sans-serif;
  text-decoration: underline;
  border: 2px solid #162635;
  border-radius: 0.25rem;
  transform: translateY(calc(-100% - 1rem));
}
.compass-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #162635;
  outline-offset: 3px;
}


/* COMPASS shared identity: 20261002-1 */
/* Shared visual foundations; preserve content-specific layouts. */

:root {
  --compass-font-ui: ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --compass-font-reading: var(--compass-font-ui);
  --font-body: var(--compass-font-ui);
  --font-ui: var(--compass-font-ui);

  --paper: #fffaf2;
  --cream: #fffaf2;
  --sand: #f4e5c7;
  --soft: #f8f1e6;
  --white: #ffffff;
  --navy: #162635;
  --ink: #1f2933;
  --text: #1f2933;
  --muted: #5f6f7a;
  --ochre: #c9963e;
  --gold: #c9963e;
  --clay: #a75f3b;
  --teal: #2f7f7a;

  --bg: var(--paper);
  --surface: #fffdf9;
  --surface-alt: var(--soft);
  --accent: var(--navy);
  --accent-dark: #0e1b27;
  --accent-soft: #f1e7db;
  --line: rgba(22, 38, 53, 0.16);

  --compass-text-strong: var(--ink);
  --compass-text-soft: var(--muted);
  --compass-line-soft: var(--line);
}

html body {
  font-family: var(--compass-font-ui);
  color: var(--ink);
  line-height: 1.65;
  background:
    radial-gradient(circle at top left,
      rgba(201, 150, 62, 0.18), transparent 34rem),
    radial-gradient(circle at bottom right,
      rgba(47, 127, 122, 0.14), transparent 32rem),
    linear-gradient(135deg, var(--paper), var(--sand));
}

html body h1,
html body h2,
html body h3,
html body input,
html body textarea,
html body select,
html body button,
html body .eyebrow,
html body .button,
html body .actions a,
html body .mail-button,
html body .door-link,
html body .signal-label,
html body .status,
html body .pill,
html body .folded summary,
html body .layer-note summary,
html body .site-footer,
html body footer {
  font-family: var(--compass-font-ui);
}

/* Cover the three observed header structures without changing markup. */
html body header .topbar,
html body header .header-inner,
html body header .wrap.nav,
html body.maps-page > header,
html body > header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

html body header .brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  font-family: var(--compass-font-ui);
  text-decoration: none;
  color: var(--navy);
}

html body header .brand > .brand-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
}

html body header .brand > .brand-seal img,
html body header .brand > img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 64px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
}

html body header .brand-text strong {
  display: block;
  font-family: var(--compass-font-ui);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: var(--navy);
}

html body header .brand-text > span {
  display: block;
  font-family: var(--compass-font-ui);
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--muted);
}

html body header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-family: var(--compass-font-ui);
}

html body header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--compass-font-ui);
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 760px) {
  html body header .topbar,
  html body header .header-inner,
  html body header .wrap.nav,
  html body.maps-page > header,
  html body > header.site-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  html body header .brand {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  html body header .brand > .brand-seal {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  html body header .brand > .brand-seal img,
  html body header .brand > img {
    width: 48px;
    height: 48px;
    max-width: 48px;
  }

  html body header nav {
    width: 100%;
    justify-content: center;
  }
}


/* COMPASS shared heading scale: 20261002-2 */
/*
 * Migration overrides for legacy page-specific typography.
 * Keep colors, margins, widths, and content-specific layouts intact.
 */

html body main h1 {
  font-size: clamp(2.3rem, 5vw, 4rem) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}

html body main h2 {
  font-size: clamp(1.65rem, 3vw, 2.45rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

html body main h3 {
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* A compact heading is a distinct role, not a different page identity. */
html body main .hero-card h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
  line-height: 1.22 !important;
}


/* COMPASS Mastery title fit: 20261002-3 */
html body main #mastery-title {
  max-width: none;
}


/* COMPASS shared introductory text: 20261002-4 */
/* Align explicit lead-text roles; retain colors, widths, and margins. */
html body main p.lead,
html body main p.hero-lead,
html body main p.section-lead {
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: normal !important;
}


/* COMPASS shared content actions: 20261002-5 */
/*
 * Content links only. Preserve colors, shadows, responsive widths,
 * focus treatments, and primary/secondary distinctions.
 * Exclude composer, navigation, and floating action-hub descendants.
 */
html body main :is(
  a.button,
  .actions > a,
  a.door-link,
  a.mail-button,
  #directory-enquiries .directory-enquiry-actions > a
):not(
  #first-note-app *,
  .compass-action-hub *,
  .compass-action-menu *,
  .launch-action-grid *,
  nav *,
  .site-header *
) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  max-width: 100%;
  padding: 0.75rem 1.125rem !important;
  border-radius: 14px !important;
  font-family: var(--compass-font-ui) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}


/* COMPASS shared ordinary cards: 20261002-6 */
/*
 * Align ordinary content-card geometry only.
 * Retain colors, borders, shadows, margins, and grid behavior.
 * Leave feature panels and interactive composer surfaces untouched.
 */
html body main :is(
  article.card,
  article.map-card,
  article.signal-card,
  article.info-card,
  article.support-card,
  div.support-card
):not(
  .boundary,
  .social,
  .deep,
  #first-note-app,
  #first-note-app *,
  .deep *,
  .compass-action-hub *
) {
  box-sizing: border-box;
  border-radius: 20px !important;
  padding: clamp(1.25rem, 2vw, 1.5rem) !important;
}


/* COMPASS grid card spacing: 20261002-7 */
/*
 * Known ordinary-card grids use their gap for separation.
 * Retain margins on standalone panels and other card families.
 */
html body main .grid > :is(
  article.card,
  article.map-card
):not(
  .boundary,
  .social,
  .deep,
  #first-note-app,
  #first-note-app *,
  .deep *
) {
  margin-top: 0 !important;
}

/* COMPASS Mastery panel-to-grid spacing: 20261002-8 */
/* Page-specific separation; preserve shared card and grid rules. */
html body.mastery-path-page main #entries > .wrap.grid {
  margin-top: 1.25rem;
}

/* COMPASS shared profile cards */
#home-projects {
      scroll-margin-top: 1rem;
    }

    #home-projects .home-project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
      margin-top: 1.25rem;
    }

    #home-projects .home-project-grid > article {
      min-width: 0;
      margin: 0;
      background: var(--surface, #fffdf9);
      border: 1px solid var(--line, rgba(22, 38, 53, 0.16));
    }

    #home-projects h3 {
      overflow-wrap: anywhere;
    }

    #home-projects a:focus-visible {
      outline: 3px solid var(--teal);
      outline-offset: 4px;
    }

    @media (max-width: 760px) {
      #home-projects .home-project-grid {
        grid-template-columns: 1fr;
      }
    }

    #home-projects .home-profile-mark {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      margin-block: 0.75rem;
      border-radius: 50%;
      background: var(--navy, #162635);
      color: var(--paper, #fffaf2);
      font-size: 1.15rem;
      font-weight: 750;
      letter-spacing: 0.08em;
    }

/* COMPASS mobile opening refinement ? 2026-10-03 */
@media (max-width: 760px) {
  #home-start,
  #home-projects {
    text-align: center;
  }

  #home-start .hero-copy,
  #home-start .home-intro,
  #home-start .home-journey,
  #home-start .small-note,
  #home-projects .home-profile-mark {
    margin-inline: auto;
  }

  #home-start .home-compass-sparks,
  #home-start .actions,
  #home-projects .actions {
    justify-content: center;
  }

  #home-start .home-compass-sparks {
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  #home-start .home-compass-sparks span {
    font-size: 2rem;
    line-height: 1.2;
  }

  #home-start .home-compass-sparks span:nth-child(2) {
    font-size: 2.6rem;
  }

  #home-projects .home-project-grid > article {
    padding: clamp(1.25rem, 5vw, 2rem);
  }

  #home-start input,
  #home-start textarea,
  #home-start select,
  #home-projects input,
  #home-projects textarea,
  #home-projects select {
    text-align: start;
  }
}

/* COMPASS paid offer presentation */
#home-offer {
  scroll-margin-top: 1rem;
}

#home-offer .home-offer-card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
}

#home-offer .home-offer-terms {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

#home-offer a:focus-visible {
  outline: 3px solid var(--teal, #167d8d);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  #home-offer {
    text-align: center;
  }

  #home-offer .actions {
    justify-content: center;
  }
}