/* Anu Paralegal — boutique legal services
   Palette: navy #0B1F33, ink #06141F, cream #F6F1E8, white, brass #C4A574, slate #5C6B7A */

:root {
  --navy: #0B1F33;
  --ink: #06141F;
  --cream: #F6F1E8;
  --cream-deep: #EDE4D4;
  --white: #FFFFFF;
  --brass: #C4A574;
  --brass-deep: #A07D45;
  --brass-soft: rgba(196, 165, 116, 0.28);
  --slate: #5C6B7A;
  --slate-soft: #7A8794;
  --line: rgba(11, 31, 51, 0.12);
  --line-gold: rgba(196, 165, 116, 0.42);
  --text: #1A2A38;
  --header-h: 4.5rem;
  --wrap: 72rem;
  --wrap-narrow: 42rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 7.5rem);
  /* Vertical rhythm, one scale for the whole site. `--section` separates
     full-bleed bands; `--section-inner` separates blocks stacked inside a
     page's content column; `--hero-gap` is used on BOTH sides of an inner
     page's closing hero rule so every inner page opens on the same measure.
     Pages previously mixed 2rem / 2.5rem / 3rem / 3.5rem / 3.75rem / 7.5rem
     ad hoc, which is what let the pricing page open with ~9.5rem of blank
     cream between the intro and the first block of content. */
  --section-inner: clamp(2.5rem, 5vw, 3.5rem);
  --hero-gap: clamp(2rem, 4vw, 2.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--brass);
}

a:hover {
  color: var(--navy);
  text-decoration-color: var(--brass-deep);
}

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

::selection {
  background: var(--navy);
  color: var(--cream);
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

.wrap {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - (var(--pad) * 2), var(--wrap-narrow));
  margin-inline: auto;
}

/* ——— Header ——— */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  border-bottom: 1px solid var(--line-gold);
}

/* The tint and blur live on a pseudo-element rather than on .site-header
   itself. An ancestor with backdrop-filter becomes the containing block for
   its position: fixed descendants, and Safari clips them to that ancestor's
   box — which hid the mobile nav drawer entirely, since the drawer sits just
   below the header. Keeping the header filter-free lets the drawer position
   against the viewport again. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* This layer covers the whole header, the menu button included. Without
     this, a tap landing on it resolves to .site-header instead of the button
     and the menu simply does not open — Safari rebuilds backdrop-filter
     layers on restore from its back/forward cache, which is exactly when the
     button started reading as dead. */
  pointer-events: none;
  background: rgba(246, 241, 232, 0.86);
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark:hover {
  color: var(--navy);
  text-decoration: none;
}

.wordmark-mark {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
}

.nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.38em;
  text-decoration-color: var(--brass);
}

.nav-toggle {
  display: none;
  position: relative;
  /* keep the button above the drawer so a tap can always close it again */
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-gold);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* opt out of Safari's double-tap-to-zoom delay on the tap target */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle-bars {
  display: block;
  width: 1.1rem;
  height: 0.7rem;
  margin: 0 auto;
  position: relative;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease), top 0.35s var(--ease), opacity 0.2s;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }

.nav-open .nav-toggle-bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ——— Buttons ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.45rem;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.btn-primary:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-gold);
}

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

.btn-brass {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
}

.btn-brass:hover {
  background: #d4b88a;
  color: var(--ink);
  border-color: #d4b88a;
}

.btn-on-dark {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-gold);
}

.btn-on-dark:hover {
  background: rgba(246, 241, 232, 0.08);
  color: var(--white);
  border-color: var(--brass);
}

.header-cta {
  flex-shrink: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ——— Type ——— */

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--brass-deep);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.display {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 6.4vw, 5.1rem);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 0.7, "opsz" 144;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.display em,
.lede em,
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

.lede {
  margin: 1.25rem 0 0;
  max-width: 38rem;
  color: var(--slate);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
}

.section-title {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.section-kicker {
  margin: 0.9rem 0 0;
  max-width: 36rem;
  color: var(--slate);
}

.gold-rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1.35rem 0 0;
  background: var(--brass);
  border: 0;
}

/* ——— Hero ——— */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(196, 165, 116, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(11, 31, 51, 0.06), transparent 55%),
    var(--cream);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100vh - var(--header-h));
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(2.5rem, 7vh, 5rem) 0;
  width: min(100%, 42rem);
  margin-left: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

.hero-copy .cta-row {
  margin-top: 2rem;
}

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 70% 20%, rgba(196, 165, 116, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(6, 20, 31, 0.15), transparent 40%);
  pointer-events: none;
}

.hero-panel-ornament {
  position: absolute;
  top: 8%;
  right: -6%;
  width: min(72%, 22rem);
  opacity: 0.18;
  pointer-events: none;
}

.motto {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.6vw, 3.35rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.motto span {
  display: block;
}

.motto .win {
  color: var(--brass);
  font-style: italic;
  font-weight: 400;
}

.hero-panel-foot {
  position: relative;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-gold);
  color: var(--cream-deep);
  font-size: 0.92rem;
  max-width: 22rem;
}

/* ——— Trust ——— */

.trust {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid rgba(196, 165, 116, 0.2);
  border-bottom: 1px solid rgba(196, 165, 116, 0.2);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-item {
  padding: 1.6rem 1.25rem;
  text-align: center;
}

.trust-item + .trust-item {
  border-left: 1px solid rgba(196, 165, 116, 0.22);
}

.trust-value {
  margin: 0;
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.trust-label {
  margin: 0.25rem 0 0;
  color: var(--cream-deep);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ——— Sections ——— */

.section {
  padding: var(--section) 0;
}

.section-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head.center {
  text-align: center;
}

.section-head.center .gold-rule {
  margin-inline: auto;
}

.section-head.center .section-kicker {
  margin-inline: auto;
}

.band-navy {
  background: var(--navy);
  color: var(--cream);
}

.band-navy .section-title,
.band-navy .eyebrow {
  color: var(--cream);
}

.band-navy .eyebrow {
  color: var(--brass);
}

.band-navy .section-kicker {
  color: rgba(246, 241, 232, 0.78);
}

.band-cream {
  background: var(--cream);
}

.band-paper {
  background: var(--white);
}

/* ——— Service cards ——— */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.6rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

a.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -22px rgba(11, 31, 51, 0.35);
  border-color: var(--brass);
  color: inherit;
  text-decoration: none;
}

.card-index {
  margin: 0 0 1.15rem;
  color: var(--brass-deep);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
}

.card h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.card p {
  margin: 0.85rem 0 1.25rem;
  color: var(--slate);
  font-size: 1.02rem;
  flex: 1;
}

.card-link {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.card:hover .card-link {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.28em;
}

/* ——— How it works ——— */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.75rem;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-top: 0.25rem;
}

.step-num {
  display: block;
  margin-bottom: 1rem;
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.step h3 {
  margin: 0 0 0.6rem;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
}

.step p {
  margin: 0;
  color: rgba(246, 241, 232, 0.78);
  font-size: 1.02rem;
}

/* ——— About teaser ——— */

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.split-copy .lede {
  max-width: none;
}

.split-copy .btn {
  margin-top: 1.75rem;
}

/* ——— CTA band ——— */

.cta-band {
  padding: clamp(4rem, 9vw, 6.5rem) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(196, 165, 116, 0.16), transparent 60%),
    var(--ink);
  color: var(--cream);
}

.cta-band .section-title {
  color: var(--cream);
}

.cta-band .section-kicker {
  margin-inline: auto;
  color: rgba(246, 241, 232, 0.78);
}

.cta-band .cta-row {
  justify-content: center;
  margin-top: 1.85rem;
}

.cta-band a:not(.btn) {
  color: var(--brass);
  text-decoration-color: var(--brass);
}

.cta-band a:not(.btn):hover {
  color: var(--cream);
}

/* ——— Page hero (inner) ——— */

.page-hero {
  position: relative;
  padding: clamp(3.25rem, 8vw, 5.5rem) 0 0;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  display: block;
  width: min(100% - (var(--pad) * 2), var(--wrap));
  height: 1px;
  margin: var(--hero-gap) auto 0;
  background: var(--line-gold);
}

/* Faint arch watermark — the wordmark motif, redrawn large and very low
   contrast. Purely decorative; it gives the inner-page heroes some texture
   instead of a flat cream field. */
.page-hero::before {
  content: "";
  position: absolute;
  top: -12%;
  right: max(-6rem, calc((100vw - var(--wrap)) / 2 - 9rem));
  width: min(26rem, 42vw);
  aspect-ratio: 1;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C4A574' stroke-width='0.9' opacity='0.5'%3E%3Cpath d='M12 56 L32 9 L52 56'/%3E%3Cpath d='M19 40 H45'/%3E%3Crect x='2' y='2' width='60' height='60'/%3E%3C/g%3E%3C/svg%3E");
}

.page-hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-hero .display {
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
}

/* ——— Service detail ——— */

.service-block {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem 2.5rem;
  padding: var(--section-inner) 0;
}

.service-block + .service-block {
  border-top: 1px solid var(--line);
}

.service-block .idx {
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-style: italic;
}

.service-block h2 {
  margin: 0 0 0.85rem;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.service-block p {
  margin: 0 0 1rem;
  max-width: 42rem;
  color: var(--slate);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.chip {
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--line-gold);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.platforms {
  padding: var(--section-inner) 0 0;
}

.platforms h2 {
  margin: 0 0 1rem;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
}

/* ——— About body ——— */

.prose {
  max-width: 40rem;
}

.prose p {
  margin: 0 0 1.15rem;
  color: var(--slate);
}

.prose p.lead {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.55;
}

.note-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.note-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  color: var(--slate);
}

.note-list strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
}

/* ——— Contact ——— */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

.aside-card {
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
}

.aside-card h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--navy);
}

.aside-card p {
  margin: 0 0 0.9rem;
  color: var(--slate);
  font-size: 1rem;
}

.aside-card a {
  font-weight: 600;
}

.form {
  display: grid;
  gap: 1.05rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem;
}

.field label {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.req {
  color: var(--brass-deep);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--brass);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

.field-hint {
  margin: 0;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.4;
}

.form-note {
  margin: 0;
  color: var(--slate);
  font-size: 0.92rem;
}

.form-status {
  min-height: 1.4rem;
  margin: 0.35rem 0 0;
  color: var(--navy);
  font-size: 0.95rem;
}

.form-status[data-state="ok"] {
  color: var(--navy);
}

/* ——— Footer ——— */

.site-footer {
  background: var(--ink);
  color: rgba(246, 241, 232, 0.78);
  padding: 3.25rem 0 2rem;
  font-size: 0.95rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.22);
}

.footer-brand .wordmark {
  color: var(--cream);
  margin: 0 0 0.85rem;
}

.footer-brand p {
  margin: 0;
  max-width: 22rem;
}

.footer-col h2 {
  margin: 0 0 0.85rem;
  color: var(--brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  color: var(--cream);
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brass);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  color: var(--slate-soft);
  font-size: 0.82rem;
}

.disclaimer {
  max-width: 42rem;
  line-height: 1.55;
}

/* Grain overlay */

.grain {
  position: relative;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 2;
}

/* ——— Responsive ——— */

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-copy {
    width: min(100% - (var(--pad) * 2), var(--wrap));
    margin-inline: auto;
    padding: clamp(2.4rem, 6vw, 3.5rem) 0;
  }

  .hero-panel {
    min-height: 18rem;
  }

  .card-grid,
  .steps,
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-item:nth-child(3) {
    border-left: 0;
  }

  .split,
  .contact-layout,
  .footer-top,
  .service-block {
    grid-template-columns: 1fr;
  }

  .service-block .block-glyph {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: -0.5rem;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-cta {
    display: none;
  }

  .nav {
    position: fixed;
    /* longhands first: Safari below 14.1 has no `inset` shorthand */
    top: var(--header-h);
    right: 0;
    bottom: auto;
    left: 0;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cream);
    border-bottom: 1px solid var(--line-gold);
    padding: 0.5rem var(--pad) 1.25rem;
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    /* pointer-events, not visibility alone, decides whether the closed drawer
       can swallow taps meant for the toggle */
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
  }

  .nav-open .nav {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav ul {
    flex-direction: column;
    gap: 0;
  }

  .nav li + li {
    border-top: 1px solid var(--line);
  }

  .nav a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.15rem;
  }

  .nav a.nav-mobile-cta {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem 1.45rem;
    color: var(--cream);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .nav a.nav-mobile-cta:hover,
  .nav a.nav-mobile-cta[aria-current="page"] {
    color: var(--cream);
    text-decoration: none;
  }

  .card-grid,
  .steps,
  .trust-grid,
  .field-row {
    grid-template-columns: 1fr;
  }

  .trust-item + .trust-item {
    border-left: 0;
    border-top: 1px solid rgba(196, 165, 116, 0.22);
  }

  .hero-panel {
    min-height: 16rem;
  }
}

@media (min-width: 721px) {
  .nav-mobile-cta {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.service-block {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.nav-open {
  /* keep header above the drawer */
}

@media (max-width: 720px) {
  /* Scroll lock is driven by a class from script.js instead of `body:has()`,
     so it does not depend on :has() support and clears reliably on iOS. It is
     deliberately not applied to <html>: `overflow: hidden` there stops iOS
     Safari treating the document as the scroller, which breaks the sticky
     header and moves the toggle out from under the tap. */
  body.nav-locked {
    overflow: hidden;
    width: 100%;
  }
}

/* ——— Live-review additions: portrait, sublines, why ——— */

.home-portrait {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.35rem;
}

.home-portrait img {
  width: 4.35rem;
  height: 4.35rem;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 50%;
  border: 2px solid var(--brass);
  flex-shrink: 0;
}

.home-portrait .eyebrow {
  /* Name sits directly above the role line, so the default eyebrow gap is
     collapsed here rather than overridden inline on the element. */
  margin-bottom: 0.2rem;
}

.home-portrait-role {
  margin: 0;
  color: var(--slate);
  font-size: 0.92rem;
}

.sublines {
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.sublines li {
  position: relative;
  padding: 0.28rem 0 0.28rem 0.95rem;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 500;
}

.sublines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.45rem;
  height: 1px;
  background: var(--brass);
}

.card .sublines {
  margin-top: -0.35rem;
}

.card .sublines li {
  color: var(--navy);
}

.portrait-figure {
  margin: 0;
}

.portrait-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 10%;
  background: #cfcfcf;
}

.portrait-figure figcaption {
  margin-top: 0.7rem;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portrait-figure-lg img {
  aspect-ratio: 4 / 5;
}

.contact-email {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.contact-email a {
  color: var(--navy);
  text-decoration-color: var(--brass);
}

/* ——— Immigration forms catalog ——— */

.immigration-forms {
  padding: var(--section-inner) 0 0;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.immigration-forms > h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.forms-intro {
  margin: 1rem 0 0.5rem;
  max-width: 42rem;
  color: var(--slate);
}

.forms-jump {
  margin: 1rem 0 0;
  max-width: 42rem;
  color: var(--slate);
  font-size: 0.98rem;
}

.forms-jump a {
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--brass);
}

.form-group {
  margin: 0;
  padding: 1.85rem 0 0.35rem;
}

.form-group + .form-group {
  border-top: 1px solid var(--line-gold);
  margin-top: 1.35rem;
}

.form-group h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.form-group-line {
  margin: 0.4rem 0 0.85rem;
  max-width: 40rem;
  color: var(--slate);
  font-size: 1.02rem;
}

.form-rows {
  margin: 0;
  padding: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 8.75rem minmax(0, 1fr);
  column-gap: 1.35rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}

.form-row:first-child {
  border-top: 1px solid var(--line);
}

.form-num {
  margin: 0;
  padding-top: 0.12rem;
  color: var(--brass-deep);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.form-row dd {
  margin: 0;
  min-width: 0;
}

.form-name {
  display: block;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
}

.form-desc {
  display: block;
  margin-top: 0.18rem;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.95rem 0;
  }

  .form-num {
    padding-top: 0;
  }
}

/* ——— Global experience & language ——— */

.experience-section {
  padding-top: 0;
}

.experience-block {
  margin: var(--section-inner) 0 0;
  padding: 1.75rem 1.6rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
}

.experience-block h2 {
  margin: 0 0 0.7rem;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.experience-block > p {
  margin: 0 0 1rem;
  max-width: 44rem;
  color: var(--slate);
}

.experience-block .region-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.lang-label {
  margin: 0 0 0.45rem;
  color: var(--brass-deep);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-list li {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 500;
}

.experience-block .lang-line {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
}

.form-group {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.script-pa {
  font-family: "Noto Sans Gurmukhi", "Noto Sans", sans-serif;
  font-weight: 500;
  margin-inline-start: 0.2em;
}

.script-hi {
  font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif;
  font-weight: 500;
  margin-inline-start: 0.2em;
}

.script-ur {
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Sans Arabic", serif;
  font-weight: 400;
  font-size: 1.08em;
  margin-inline-start: 0.25em;
  line-height: 1.8;
}

.field select optgroup {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
}

.card-anchor {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.18em;
}

/* ——— Utility ——— */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ——— Guarantee callout ——— */

.guarantee-card {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1.1rem, 2.6vw, 1.5rem);
  background: rgba(196, 165, 116, 0.09);
  border-left: 2px solid var(--brass);
}

.guarantee-card > :first-child {
  margin-top: 0;
}

/* Matched on two classes rather than a bare `h2`/`h3`. Inside .fee-section the
   section-title rule is equally specific and declared later, which repainted
   this heading navy-on-navy — invisible, but still holding its full display
   height. */
.guarantee-card .guarantee-title {
  margin: 0 0 0.3rem;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.guarantee-card .guarantee-title::after {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  margin-left: 0.6rem;
  vertical-align: 0.3em;
  background: var(--brass);
}

.guarantee-card p {
  margin: 0;
  max-width: 46rem;
  color: var(--slate);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* ——— Fee schedule ——— */

.fee-note {
  margin: 1.15rem 0 0;
  max-width: 42rem;
  color: var(--slate);
  font-size: 0.98rem;
}

.fee-note a {
  font-weight: 600;
  color: var(--navy);
}

.fee-section {
  padding: var(--section-inner) 0 0;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.fee-section + .fee-section {
  margin-top: var(--section-inner);
  border-top: 1px solid var(--line);
}

.fee-section-head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
}

.fee-section-head .idx {
  margin: 0;
  padding-top: 0.3rem;
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
}

.fee-section h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fee-section-line {
  grid-column: 2;
  margin: 0.45rem 0 0;
  max-width: 42rem;
  color: var(--slate);
  font-size: 1.02rem;
}

.fee-table {
  width: 100%;
  margin-top: clamp(1.35rem, 3vw, 1.85rem);
  border-collapse: collapse;
  table-layout: fixed;
}

.fee-table thead th {
  padding: 0 1.15rem 0.65rem 0;
  border-bottom: 1px solid var(--brass);
  color: var(--brass-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.fee-table thead th:last-child {
  padding-right: 0;
  text-align: right;
}

.fee-table tbody th,
.fee-table tbody td {
  padding: 1.05rem 1.15rem 1.05rem 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.fee-table tbody tr:first-child th,
.fee-table tbody tr:first-child td {
  border-top: 0;
}

.fee-table tbody tr {
  transition: background 0.25s var(--ease);
}

.fee-table tbody tr:hover {
  background: rgba(196, 165, 116, 0.07);
}

.fee-service {
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-align: left;
}

.fee-scope {
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.5;
}

.fee-turn {
  color: var(--text);
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.fee-turn small {
  display: block;
  margin-top: 0.15rem;
  color: var(--slate-soft);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.fee-rate {
  padding-right: 0 !important;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.fee-rate small {
  display: block;
  margin-top: 0.1rem;
  color: var(--slate-soft);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fee-turn::before,
.fee-rate::before {
  display: none;
  color: var(--brass-deep);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .fee-table,
  .fee-table tbody,
  .fee-table tbody tr,
  .fee-table tbody th,
  .fee-table tbody td {
    display: block;
    width: auto;
  }

  .fee-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fee-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--line);
  }

  .fee-table tbody tr:first-child {
    border-top: 0;
  }

  .fee-table tbody th,
  .fee-table tbody td {
    padding: 0;
    border-top: 0;
  }

  .fee-service {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .fee-rate {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.2rem;
  }

  .fee-scope {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
  }

  .fee-turn {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
  }

  .fee-turn::before {
    display: inline;
    content: "Turnaround — ";
  }

  .fee-turn small {
    display: inline;
    margin-top: 0;
  }

  .fee-turn small::before {
    content: " · ";
  }
}

/* ——— Terms page ——— */

.terms-body {
  padding: var(--section-inner) 0 0;
}

.terms-intro {
  margin-top: 0;
  max-width: 44rem;
  color: var(--slate);
}

.terms-list {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: clause;
}

.terms-clause {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding: clamp(1.6rem, 3.5vw, 2.15rem) 0;
  border-top: 1px solid var(--line);
  counter-increment: clause;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.terms-clause::before {
  content: counter(clause, decimal-leading-zero);
  grid-row: 1 / span 2;
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.35;
}

.terms-clause h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.terms-clause > div {
  grid-column: 2;
}

.terms-clause p {
  margin: 0.5rem 0 0;
  max-width: 44rem;
  color: var(--slate);
}

.terms-clause .sublines {
  margin-top: 0.85rem;
}

.terms-toc {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.35rem 1.75rem;
}

.terms-toc li {
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.terms-toc a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.terms-toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brass);
}

@media (max-width: 720px) {
  .fee-section-head {
    grid-template-columns: 1fr;
  }

  .fee-section-head .idx {
    padding-top: 0;
  }

  .fee-section-line {
    grid-column: 1;
  }

  .terms-clause {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .terms-clause::before {
    grid-row: auto;
  }

  .terms-clause > div,
  .terms-clause h2 {
    grid-column: 1;
  }
}

.terms-clause strong {
  color: var(--navy);
  font-weight: 600;
}

.terms-clause a,
.fee-note a,
.terms-intro a,
.page-hero .lede a {
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--brass);
}

/* The primary nav carries four links plus the CTA button. Between the mobile
   drawer breakpoint (721px) and roughly 940px the row runs out of room and the
   links start colliding with the button, so the gaps, tracking, and CTA
   padding tighten across that band instead of wrapping. */
@media (min-width: 721px) and (max-width: 940px) {
  .header-inner {
    gap: 1rem;
  }

  .wordmark {
    letter-spacing: 0.16em;
  }

  .nav ul {
    gap: 1.05rem;
  }

  .nav a {
    font-size: 0.9rem;
  }

  .header-cta {
    padding: 0.7rem 0.95rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }
}

/* Terms lives in the footer on desktop, where the header row has no space for
   a fifth link. In the mobile drawer there is room, so it appears there as a
   quieter utility item below the primary links. */
.nav-utility {
  display: none;
}

@media (max-width: 720px) {
  .nav-utility {
    display: block;
  }

  .nav-utility a {
    color: var(--slate);
    font-size: 1rem;
    letter-spacing: 0.03em;
  }

  .nav-utility a:hover,
  .nav-utility a[aria-current="page"] {
    color: var(--navy);
  }
}

/* ——— Vertical rhythm normalisation ———

   Everything below exists to keep one measure between blocks on every page.
   The rules are late in the file on purpose: each one has to beat the
   equally-specific single-class rule it corrects. */

/* An inner page's hero closes with a gold rule that already reads as the break
   before the first block of content, and every content block also carries its
   own top padding. On the pricing page a third value — `.guarantee-card`'s
   margin — stacked on top of those two, putting ~9.5rem of blank cream between
   the intro paragraph and the guarantee callout while comparable breaks
   elsewhere on the site run about half that. Collapsing the first block's own
   padding to the same `--hero-gap` used above the rule puts one measure on both
   sides of it, on all five pages. */
.page-hero + .wrap > :first-child {
  padding-top: var(--hero-gap);
}

/* Matches the inline `padding-top: 3rem` that About and Contact used to carry
   on their opening `.section`: same intent, but on the shared scale. */
.section-tight {
  padding-top: var(--hero-gap);
}

/* The callout is normally the last thing in a block and its top margin is the
   break above it. When it opens a block, that margin is a second gap on top of
   the block's own padding. */
.guarantee-card:first-child {
  margin-top: 0;
}

/* About stacked two `.section` bands back to back: the first contributed a full
   `--section` of bottom padding, the second `0` of top padding, and the white
   card inside added its own margin — roughly 10rem of empty cream between the
   bio and the experience card. */
.about-body {
  padding-bottom: 0;
}

.section.experience-section {
  padding-top: 0;
  padding-bottom: var(--section);
}

/* Services, Pricing, and Terms lay their body out in a bare `.wrap` with no
   band padding, so the closing dark band needs the gap explicitly. Home and
   About end on a `.section`, which already supplies it. Previously this was an
   inline style repeated on three pages. */
.cta-band-spaced {
  margin-top: var(--section);
}

/* ——— Icon sprite ——— */

/* One inline sprite per page feeds every `<use>` below, so a motif that repeats
   (the scale on Home and Services, the five package glyphs on Pricing) is
   defined once. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.svc-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--brass-deep);
  flex-shrink: 0;
}

/* ——— Ornamental divider ——— */

.ornament {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.6rem);
  /* Deliberately under one `--section-inner` step: the mark itself occupies
     visual height, so a full step on each side of it reads as a hole rather
     than a break. */
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

/* When the divider falls between two blocks that already carry their own
   padding, it sits inside that existing gap instead of adding to it. */
.ornament-inline {
  margin: 0;
}

/* The divider is the break, so whatever follows it does not add another. */
.ornament + .guarantee-card,
.ornament + .experience-block {
  margin-top: 0;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}

.ornament-mark {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brass);
  opacity: 0.85;
}

/* ——— Card / block glyph slots ——— */

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.15rem;
}

.card-top .card-index {
  margin: 0;
}

.card .svc-icon {
  transition: color 0.35s var(--ease);
}

a.card:hover .svc-icon {
  color: var(--brass);
}

.block-glyph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.block-glyph .idx {
  margin: 0;
}

.fee-section-glyph {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.fee-section-glyph .idx {
  margin: 0;
  padding-top: 0;
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
}

.fee-section-head {
  grid-template-columns: 3.25rem minmax(0, 1fr);
}

/* ——— How it works: process flow ——— */

.steps-flow .step {
  padding-top: 0;
}

.step-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background: rgba(196, 165, 116, 0.07);
  color: var(--brass);
}

.step-node .svc-icon {
  width: 1.6rem;
  height: 1.6rem;
  color: inherit;
}

.steps-flow .step-num {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
}

/* The connector only makes sense while the three steps sit in one row. Below
   961px `.steps` reflows to two columns and then one, so it is dropped rather
   than left pointing at nothing. */
@media (min-width: 961px) {
  .steps-flow .step:not(:last-child)::before,
  .steps-flow .step:not(:last-child)::after {
    position: absolute;
    top: 1.75rem;
    content: "";
  }

  .steps-flow .step:not(:last-child)::before {
    left: 4.1rem;
    right: -1.2rem;
    height: 1px;
    background: var(--line-gold);
  }

  .steps-flow .step:not(:last-child)::after {
    right: -1.2rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 1px solid var(--brass);
    border-right: 1px solid var(--brass);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ——— Pricing: schedule intro ——— */

/* Opens the block, so the shared `.fee-note` top margin would be a third gap
   under the hero rule. Zeroed so every page starts content exactly two
   `--hero-gap` steps below the hero. */
.fee-note-lead {
  margin-top: 0;
  max-width: 46rem;
}

/* The intro is not a `.fee-section`, so the sibling rule that spaces and rules
   off each package group does not reach the first one. */
.fee-intro + .fee-section {
  margin-top: var(--section-inner);
  border-top: 1px solid var(--line);
}

/* ——— Pricing: hourly & rush rate table ——— */

/* Shares `.fee-table` so the hourly section reads as part of the same schedule
   rather than a differently-shaped panel. */
.rate-table .fee-rate {
  font-size: 1.15rem;
}

.rate-table .fee-turn {
  color: var(--slate);
}

@media (max-width: 720px) {
  .fee-section-head {
    grid-template-columns: 1fr;
  }

  .fee-section-glyph {
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.35rem;
  }

  .block-glyph {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
  }
}

/* Replaces repeated inline `margin-top` overrides on the Services and Pricing
   closing blocks. */
.section-kicker-flush {
  margin-top: 0;
}

.platforms-cta {
  margin-top: 1.5rem;
}

/* ——— Small shared utilities (were inline styles) ——— */

/* Services: the guarantee callout introduces the forms catalog rather than
   closing it, so the gap belongs below it. */
.guarantee-card-lead {
  margin-bottom: 2.5rem;
}

.fee-note-spaced {
  margin-top: 1.5rem;
}

.btn-block {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.aside-cta {
  margin: 1.25rem 0;
}

.gold-rule-spaced {
  margin: 1.5rem 0;
}

.aside-card .aside-fineprint {
  margin: 1rem 0 0;
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.5;
}