/* ==========================================================================
   RecordVerity Legal Transcription — site stylesheet
   Design direction: "Quiet Authority"

   1.  Variables / Reset
   2.  Global
   3.  Typography
   4.  Layout
   5.  Header
   6.  Navigation
   7.  Hero
   8.  Content Sections
   9.  Services
   10. About
   11. Contact
   12. Footer
   13. Utility Classes
   14. Responsive Styles
   15. Accessibility / Reduced Motion
   16. Content Expansion (steps, fee table, FAQ)
   ========================================================================== */


/* ==========================================================================
   1. Variables / Reset
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #17324D;
  --teal: #2D6F73;
  --ivory: #F7F5F0;
  --charcoal: #1F2937;
  --grey: #E5E7EB;
  --white: #FFFFFF;

  /* Derived tones */
  --navy-deep: #102437;
  --teal-strong: #245A5E;
  --teal-soft: #9CC7C9;
  --ink-muted: #4A5A6A;
  --ink-faint: #5F6B7A;
  --paper-line: #DEE2E6;
  --rule: rgba(23, 50, 77, 0.16);
  --rule-strong: rgba(23, 50, 77, 0.34);
  --on-navy: #F7F5F0;
  --on-navy-muted: rgba(247, 245, 240, 0.76);
  --on-navy-faint: rgba(247, 245, 240, 0.58);
  --rule-on-navy: rgba(247, 245, 240, 0.22);
  --focus: #2D6F73;
  --focus-on-dark: #9CC7C9;
  --shadow-soft: 0 22px 48px -34px rgba(16, 36, 55, 0.5);

  /* Font stacks */
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Layout */
  --max-width: 74rem;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;

  /* Motion */
  --transition-fast: 140ms ease;
  --transition: 220ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

table {
  border-collapse: collapse;
}

a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--teal-strong);
}


/* ==========================================================================
   2. Global
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background-color: rgba(45, 111, 115, 0.18);
}

main {
  display: block;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--rule);
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.24;
  color: var(--navy);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 2.95rem);
}

h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.05vw, 1.9rem);
}

h3 {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
}

h4 {
  font-size: 1rem;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.lead {
  max-width: var(--measure);
  font-size: clamp(1.03rem, 0.97rem + 0.32vw, 1.17rem);
  line-height: 1.62;
  color: var(--ink-muted);
}

.prose {
  max-width: var(--measure);
  color: var(--ink-muted);
}

.prose > * + * {
  margin-top: 1.05rem;
}

.prose strong {
  color: var(--charcoal);
}

.on-dark {
  color: var(--on-navy);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: var(--on-navy);
}

.on-dark .eyebrow {
  color: var(--teal-soft);
}

.on-dark .lead,
.on-dark .prose {
  color: var(--on-navy-muted);
}


/* ==========================================================================
   4. Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Keep fragment targets clear of the sticky header. */
[id] {
  scroll-margin-top: 6.5rem;
}

.section {
  padding-block: clamp(3rem, 6vw, 5.25rem);
}

.section--ivory {
  background-color: var(--ivory);
}

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

.section__head {
  max-width: var(--measure);
}

.section__head .eyebrow + h2 {
  margin-top: 0.85rem;
}

.section__head .lead,
.section__head .prose {
  margin-top: 1.1rem;
}

.section__head + .section__body {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.page-header {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  background-color: var(--navy);
}

.page-header .lead {
  margin-top: 1.1rem;
  max-width: 46rem;
}

.page-header__meta {
  margin-top: 1.35rem;
  font-size: 0.85rem;
  color: var(--on-navy-faint);
}

.error-page {
  display: flex;
  align-items: center;
  min-height: 58vh;
  padding-block: clamp(3.5rem, 10vh, 7rem);
}

.cta-band {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  background-color: var(--navy);
}

.cta-band__inner {
  max-width: 44rem;
}

.cta-band p {
  margin-top: 1.1rem;
  color: var(--on-navy-muted);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--space-lg);
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--white);
  border-bottom: 1px solid var(--grey);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  width: auto;
  height: 2.65rem;
}


/* ==========================================================================
   6. Navigation
   ========================================================================== */

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.85rem);
}

.site-nav__list a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__list a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.site-nav__list a[aria-current="page"] {
  color: var(--teal);
  border-bottom-color: var(--rule-strong);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nav-toggle:hover {
  border-color: var(--rule-strong);
  color: var(--teal);
}

.nav-toggle__icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 0.6rem;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--transition);
}

.nav-toggle__icon::before {
  top: 0;
}

.nav-toggle__icon::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(0.3rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-0.3rem) rotate(-45deg);
}


/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  padding-block: clamp(3rem, 6.5vw, 5.75rem);
  background-color: var(--navy);
}

.hero__inner {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__brand {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
}

.hero h1 {
  margin-top: 1.15rem;
  max-width: 20ch;
}

.hero__lead {
  margin-top: 1.4rem;
  max-width: 33rem;
  font-size: clamp(1.03rem, 0.97rem + 0.35vw, 1.19rem);
  line-height: 1.62;
  color: var(--on-navy-muted);
}

.hero__credential {
  margin-top: 1.9rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule-on-navy);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--on-navy-faint);
}

.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* ==================================================
   Hero Service Folio
   ================================================== */

/* A small stack of printed service briefs. The active sheet sits at the front
   (0, 0); the two sheets behind step up and to the left so their heading bands
   stay exposed, readable and selectable. Timing and interaction live in
   js/main.js. */

.folio {
  /* Sheet geometry */
  --sheet-w: 20.5rem;
  --sheet-ratio: 8.5 / 10;
  --fan-x: 12px;
  --fan-y: 44px;
  --fan-lift: 8px;

  /* Per-service paper tints — 01 Court & Legal, 02 Expedited,
     03 Agency & Overflow. The "-quiet" tone is the resting tone for the
     middle and rear sheets; "-hover" deepens a rear sheet on fine-pointer
     devices only. The tint follows the service, never the stack position. */
  --sheet-tint-1: #F8F6F1;
  --sheet-tint-2: #F1F4F5;
  --sheet-tint-3: #EDF4F2;
  --sheet-tint-1-quiet: #F2F0EB;
  --sheet-tint-2-quiet: #EBEEEF;
  --sheet-tint-3-quiet: #E8EEEC;
  --sheet-tint-1-hover: #EDEBE6;
  --sheet-tint-2-hover: #E6E9EA;
  --sheet-tint-3-hover: #E2E9E7;

  /* Sheet surfaces */
  --paper-edge: rgba(23, 50, 77, 0.12);
  --paper-rule: rgba(23, 50, 77, 0.14);
  --sheet-shadow: 0 13px 26px -22px rgba(8, 20, 32, 0.45);
  --sheet-shadow-front: 0 18px 36px -26px rgba(8, 20, 32, 0.55);
  --sheet-shadow-hover: 0 18px 32px -20px rgba(8, 20, 32, 0.5);

  /* Approved motion */
  --sheet-move: 600ms;
  --sheet-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  width: min(100%, var(--sheet-w));
  padding-top: calc(var(--fan-y) * 2);
}

.folio__stack {
  position: relative;
  aspect-ratio: var(--sheet-ratio);
}

.folio-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.15rem 0.9rem;
  --sheet-tint: var(--sheet-tint-1);
  --sheet-tint-quiet: var(--sheet-tint-1-quiet);
  --sheet-tint-hover: var(--sheet-tint-1-hover);
  background-color: var(--sheet-tint-quiet);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  box-shadow: var(--sheet-shadow);
  transition: transform var(--sheet-move) var(--sheet-ease),
    background-color var(--sheet-move) ease,
    box-shadow var(--sheet-move) ease;
}

/* 02 — Expedited Service */
.folio-sheet:nth-child(2) {
  --sheet-tint: var(--sheet-tint-2);
  --sheet-tint-quiet: var(--sheet-tint-2-quiet);
  --sheet-tint-hover: var(--sheet-tint-2-hover);
}

/* 03 — Agency & Overflow Support */
.folio-sheet:nth-child(3) {
  --sheet-tint: var(--sheet-tint-3);
  --sheet-tint-quiet: var(--sheet-tint-3-quiet);
  --sheet-tint-hover: var(--sheet-tint-3-hover);
}

.folio-sheet.is-front {
  z-index: 3;
  background-color: var(--sheet-tint);
  box-shadow: var(--sheet-shadow-front);
  transform: translate(0, 0);
}

.folio-sheet.is-middle {
  z-index: 2;
  transform: translate(calc(-1 * var(--fan-x)), calc(-1 * var(--fan-y)));
}

.folio-sheet.is-rear {
  z-index: 1;
  transform: translate(calc(-2 * var(--fan-x)), calc(-2 * var(--fan-y)));
}

/* Service brief typography */
.sheet__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--paper-rule);
}

.sheet__number {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* Scoped to .folio so the hero's .on-dark h3 colour cannot reach the sheets. */
.folio .sheet__title {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.004em;
  color: var(--navy);
}

.sheet__copy {
  margin-top: auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.sheet__attrs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.15rem;
}

.sheet__attr {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--charcoal);
}

.sheet__attr::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--teal);
}

.sheet__foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--paper-rule);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Full-sheet selection target: a real button, so Enter and Space work. It sits
   above the sheet content and carries the accessible label. */
.sheet__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}

.folio-sheet.is-front .sheet__select {
  cursor: default;
}

/* Hero caption */
.hero__caption {
  max-width: 26rem;
  margin-top: clamp(2rem, 4vw, 2.6rem);
  padding-left: 1.1rem;
  border-left: 2px solid rgba(156, 199, 201, 0.6);
}

.hero__caption-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-navy);
}

.hero__caption-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--on-navy-muted);
}

/* Rear-sheet hover — fine-pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .folio-sheet.is-middle:hover {
    background-color: var(--sheet-tint-hover);
    box-shadow: var(--sheet-shadow-hover);
    transform: translate(
      calc(-1 * var(--fan-x) - var(--fan-lift)),
      calc(-1 * var(--fan-y) - var(--fan-lift))
    );
  }

  .folio-sheet.is-rear:hover {
    background-color: var(--sheet-tint-hover);
    box-shadow: var(--sheet-shadow-hover);
    transform: translate(
      calc(-2 * var(--fan-x) - var(--fan-lift)),
      calc(-2 * var(--fan-y) - var(--fan-lift))
    );
  }
}

/* Tablet — the folio sits under the copy, so centre it on the column */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__visual {
    align-items: center;
  }

  .folio {
    --sheet-w: 19.5rem;
  }

  /* Keeps the sheet footer on one line at this narrower sheet width. */
  .folio .sheet__foot {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }
}

/* Phones — smaller sheets, shallower fan, shorter heading bands */
@media (max-width: 47.99em) {
  .folio {
    --sheet-w: 18rem;
    --fan-x: 8px;
    --fan-y: 32px;
    --fan-lift: 0px;

    /* Phones: centre the folio within the hero column. Auto margins centre the
       folio box itself (matching the tablet treatment), so the front sheet sits
       centred while the rear sheets keep their usual top-left offset. */
    margin-inline: auto;
  }

  .folio-sheet {
    padding: 0.75rem 0.95rem 0.8rem;
  }

  .sheet__number {
    font-size: 0.7rem;
  }

  .folio .sheet__title {
    font-size: 0.95rem;
  }

  .sheet__copy {
    font-size: 0.88rem;
  }

  .sheet__attrs {
    gap: 0.45rem;
    margin-top: 0.95rem;
  }

  .sheet__attr {
    font-size: 0.8rem;
  }

  .sheet__foot {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .hero__caption {
    max-width: 22rem;
  }
}

/* Reduced motion — the folio keeps its layout, drops its movement */
@media (prefers-reduced-motion: reduce) {
  .folio-sheet,
  .sheet__select {
    transition: none;
  }

  .folio-sheet.is-middle:hover,
  .folio-sheet.is-rear:hover {
    transform: translate(calc(-1 * var(--fan-x)), calc(-1 * var(--fan-y)));
  }

  .folio-sheet.is-rear:hover {
    transform: translate(calc(-2 * var(--fan-x)), calc(-2 * var(--fan-y)));
  }
}


/* ==========================================================================
   8. Content Sections
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--teal-strong);
  border-color: var(--teal-strong);
  color: var(--white);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--rule-strong);
  color: var(--navy);
}

.btn--secondary:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

.btn--ghost-light {
  background-color: transparent;
  border-color: rgba(247, 245, 240, 0.42);
  color: var(--on-navy);
}

.btn--ghost-light:hover {
  background-color: var(--ivory);
  border-color: var(--ivory);
  color: var(--navy);
}

.btn--small {
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
}

/* Service summary list */
.service-list {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.service-list__item {
  display: flex;
  flex-direction: column;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-strong);
}

.service-list__index {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.service-list__item h3 {
  margin-top: 0.7rem;
}

.service-list__item p {
  margin-top: 0.6rem;
  font-size: 0.97rem;
  color: var(--ink-muted);
}

.service-list__item .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.1rem;
}

/* Value list */
.value-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.value-list__item {
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.value-list__item h3 {
  font-size: 1.05rem;
}

.value-list__item p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/* Bordered panel */
.panel {
  padding: clamp(1.6rem, 4vw, 3rem);
  background-color: var(--ivory);
  border: 1px solid var(--grey);
  border-radius: var(--radius-md);
}

.panel__inner {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

.panel .prose {
  max-width: 46rem;
}

.panel .text-link {
  margin-top: 1.25rem;
}

/* Note (used for security guidance) */
.note {
  padding: 1.25rem var(--space-md);
  background-color: var(--ivory);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.note p {
  max-width: var(--measure);
  font-size: 0.97rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   9. Services
   ========================================================================== */

.entry {
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}

.entry + .entry {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.entry__inner {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3.25rem);
}

.entry__body .prose + .prose {
  margin-top: 1.05rem;
}

.detail-list {
  margin-top: 1.75rem;
}

.detail-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.detail-list li::before {
  content: "";
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 0.6rem;
  height: 1px;
  background-color: var(--teal);
}

.detail-list__label {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ==========================================================================
   10. About
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3.25rem);
}

.why-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.why-list__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-strong);
}

.why-list__item p {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}


/* ==========================================================================
   11. Contact
   ========================================================================== */

.contact-details {
  display: grid;
}

.contact-details__row {
  display: grid;
  gap: 0.3rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
}

.contact-details__row:last-child {
  border-bottom: 1px solid var(--rule);
}

.contact-details dt {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.contact-details dd {
  font-size: 1rem;
  color: var(--charcoal);
}

.contact-details dd a {
  overflow-wrap: anywhere;
}

.contact-details__note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.contact-aside {
  margin-top: var(--space-lg);
}

.contact-aside p {
  max-width: var(--measure);
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.contact-aside .actions {
  margin-top: 1.5rem;
}


/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background-color: var(--navy-deep);
  color: var(--on-navy);
}

.site-footer a {
  color: var(--on-navy-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--on-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.site-footer__wordmark {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--on-navy);
}

.site-footer__tagline {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
}

.site-footer__place {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--on-navy-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  font-size: 0.95rem;
}

.site-footer__email {
  margin-top: 1.35rem;
  font-size: 0.95rem;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-on-navy);
  font-size: 0.84rem;
  color: var(--on-navy-faint);
}


/* ==========================================================================
   13. Utility Classes
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.legal {
  max-width: 46rem;
}

.spaced-top {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.text-link {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 111, 115, 0.4);
  padding-bottom: 1px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.text-link::after {
  content: "\2192";
  margin-left: 0.4rem;
  font-size: 0.9em;
}

.text-link:hover {
  color: var(--teal-strong);
  border-bottom-color: var(--teal-strong);
}

.on-dark .text-link {
  color: var(--teal-soft);
  border-bottom-color: rgba(156, 199, 201, 0.45);
}

.on-dark .text-link:hover {
  color: var(--on-navy);
  border-bottom-color: var(--on-navy);
}

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 60;
  padding: var(--space-xs) 1.15rem;
  background-color: var(--navy);
  color: var(--on-navy);
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}


/* ==========================================================================
   14. Responsive Styles
   ========================================================================== */

/* Small phones and up — 480px */
@media (max-width: 29.9375em) {
  .hero__brand {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 30em) {
  .actions .btn {
    min-width: 12rem;
  }
}

/* Large phones / small tablets — 600px */
@media (min-width: 37.5em) {
  .contact-details__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.25rem;
  }

  .site-footer__meta {
    align-items: baseline;
  }
}

/* Tablets — 768px */
@media (min-width: 48em) {
  .value-list,
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 3rem);
  }

  .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Small laptops — 900px */
@media (min-width: 56.25em) {
  .entry__inner,
  .split,
  .panel__inner {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    align-items: start;
  }

  .entry__aside h2,
  .split__aside h2 {
    position: sticky;
    top: 6rem;
  }
}

/* Desktop — 1024px */
@media (min-width: 64em) {
  .service-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }
}

/* Wide desktop — 1140px */
@media (min-width: 71.25em) {
  .value-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Collapsed navigation — below 900px */
@media (max-width: 56.1875em) {
  html.js .nav-toggle {
    display: inline-flex;
  }

  html.js .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1.15rem;
  }

  html.js .site-nav.is-open {
    display: flex;
  }

  html.js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  html.js .site-nav__list a {
    display: block;
    padding-block: 0.9rem;
    border-top: 1px solid var(--grey);
    border-bottom: 0;
  }

  html.js .site-nav__list a:hover,
  html.js .site-nav__list a[aria-current="page"] {
    border-top-color: var(--rule-strong);
  }

  html.js .site-nav__cta {
    margin-top: 1.25rem;
    width: 100%;
  }

}


/* ==========================================================================
   15. Accessibility / Reduced Motion
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .hero__visual,
  .cta-band,
  .skip-link {
    display: none;
  }

  body {
    color: #000;
  }
}


/* ==========================================================================
   16. Content Expansion (steps, fee table, FAQ)

   Components introduced with the content expansion. They reuse the existing
   Quiet Authority tokens, rules and spacing scale.
   ========================================================================== */

/* Numbered process steps — home preview and How It Works */
.step-list {
  display: grid;
  gap: 0;
}

.step {
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-strong);
}

.step-list:not(.step-list--grid) .step + .step {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.step__number {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin-top: 0.65rem;
}

.step__text {
  margin-top: 0.6rem;
  max-width: var(--measure);
  font-size: 0.97rem;
  color: var(--ink-muted);
}

.step .detail-list {
  margin-top: 1.25rem;
}

.section__more {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Regulated fee table */
.fee-table-wrap {
  margin-top: 1.5rem;
}

.fee-table {
  width: 100%;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.97rem;
}

.fee-table thead th {
  padding: 0.9rem 0.75rem 0.75rem 0;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}

.fee-table tbody th,
.fee-table tbody td {
  padding: 0.9rem 0.75rem 0.9rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
}

.fee-table tbody th {
  font-weight: 400;
  color: var(--charcoal);
}

.fee-table tbody td {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fee-minimum {
  margin-top: 1.15rem;
  font-size: 1rem;
  color: var(--charcoal);
}

.fee-minimum strong {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--navy);
}

.fee-source {
  margin-top: 1.15rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* FAQ — native details / summary */
.faq-list {
  max-width: 56rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

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

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

.faq-item summary {
  position: relative;
  display: block;
  padding: 1.05rem 2.6rem 1.05rem 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary:hover {
  color: var(--teal-strong);
}

.faq-item summary::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  right: 0.45rem;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 1px solid var(--teal);
  border-bottom: 1px solid var(--teal);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

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

.faq-item__answer {
  max-width: var(--measure);
  padding-bottom: 1.4rem;
}

.faq-item__answer p {
  font-size: 0.97rem;
  color: var(--ink-muted);
}

.faq-item__answer p + p {
  margin-top: 0.9rem;
}

.faq-item__answer .text-link {
  margin-top: 0.9rem;
}

@media (min-width: 48em) {
  /* Compact two-column steps for the home preview */
  .step-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 3rem);
    row-gap: clamp(1.75rem, 3.5vw, 2.5rem);
  }
}

@media (max-width: 37.5em) {
  .fee-table {
    font-size: 0.92rem;
  }

  .fee-table thead th,
  .fee-table tbody th,
  .fee-table tbody td {
    padding-right: 0.5rem;
  }

  .faq-item summary {
    font-size: 1rem;
    padding-right: 2.2rem;
  }
}


/* How It Works — editorial process grid

   Desktop: steps 01–03 across in thirds, then 04–05 across in halves.
   Tablet: two columns, with the final step occupying the full width.
   Mobile: the original single-column sequence.

   Each step keeps its own thin top rule, small teal number, serif heading and
   body copy. No cards, shadows, icons, arrows or timeline graphics. */

.process-section {
  padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 4vw, 2.75rem);
}

.process .entry {
  margin-top: 0;
  padding-top: clamp(1.35rem, 2.5vw, 1.85rem);
}

/* Steps stack inside their own column: number, heading, body copy. */
.process .entry__inner {
  display: block;
}

.process .entry__body {
  margin-top: 1rem;
}

.process .detail-list {
  margin-top: 1.25rem;
}

.process .entry__body .spaced-top {
  margin-top: 1.5rem;
}

@media (min-width: 48em) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 2.75rem);
    row-gap: clamp(2.25rem, 4vw, 3rem);
  }

  .process .entry:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .process {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3.5vw, 2.5rem);
    row-gap: clamp(2.5rem, 4vw, 3.25rem);
  }

  /* 01–03: one third of the content width each */
  .process .entry {
    grid-column: span 2;
  }

  /* 04–05: one half of the content width each */
  .process .entry:nth-child(4),
  .process .entry:nth-child(5) {
    grid-column: span 3;
  }
}