/* trademarksupport.com · boutique IP, navy/ink + gold accent */

:root {
  --navy: #0c1d33;
  --navy-2: #152a45;
  --ink: #142033;
  --body: #3d4556;
  --muted: #5d6678;
  --faint: #5f687a; /* 4.59:1 or more on paper, card, and panel (WCAG 1.4.3); was #7b8494, 3.09 to 3.77:1 */
  --paper: #f6f3ec;
  --card: #fffcf6;
  --panel: #efe8d8;
  --hair: #e3d9c6;
  --hair2: #d5cbb6;
  --accent: #c49a3c;
  --accent-ink: #7a5d18; /* 5:1 or more on paper, panel, and the gold tint; was #8d6d1f, 3.93 to 4.84:1 */
  --accent-soft: rgba(196, 154, 60, 0.14);
  --ok: #2e6b3f;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --max: 1120px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-ink); }
a:hover { color: var(--navy); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
/* The gold outline was 2.36:1 on the cream background, under the 3:1 that WCAG 1.4.11 expects
   for focus indicators; --accent-ink is 5.56:1. On the navy top bar and footer, gold (6.48:1) stays. */
.util :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--navy);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 80;
}
.skip:focus { top: 12px; }

.wrap {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

/* ---------- Utility bar ---------- */

.util {
  background: var(--navy);
  color: #d7deea;
  font-size: 13px;
}
.util .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px 28px;
  align-items: center;
  padding: 8px 0;
  flex-wrap: wrap;
}
.util a { color: var(--accent); text-decoration: none; }
.util a:hover { color: #f3e3b5; }
.util-firm { color: #9aa6b8; }
.util-phone {
  white-space: nowrap;
  padding: 2px 0 2px 16px;
  margin-left: auto;
}

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  /* The utility bar sits inside the header landmark but scrolls away as before: site.js
     sets --util-h to its height. Without JS the whole header, bar included, stays put. */
  top: calc(-1 * var(--util-h, 0px));
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}

/* Bring the utility bar back into view when its links receive keyboard focus. */
.site-header:focus-within { top: 0; }
@supports selector(:has(*)) {
  .site-header:focus-within { top: calc(-1 * var(--util-h, 0px)); }
  .site-header:has(.util:focus-within) { top: 0; }
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  position: relative;
}

.wordmark {
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark em { color: var(--accent); font-style: normal; margin-left: 0.4em; }
.site-header .wordmark em { color: var(--accent-ink); }
.wordmark:hover { color: var(--navy); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hair2);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--navy);
  font: 600 13px var(--sans);
  cursor: pointer;
}

.btn-call {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--hair2);
  color: var(--navy);
  font: 600 13.5px var(--sans);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-call:hover { border-color: var(--accent); color: var(--accent-ink); }

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--navy); }
.site-nav a[aria-current="page"] { font-weight: 700; }
/* The header's contact button sits inside the nav. Without this, the nav link colors (muted,
   or navy on hover and on the current page) override the button's light text on navy. */
.site-nav a.btn, .site-nav a.btn:hover, .site-nav a.btn[aria-current="page"] { color: var(--paper); }

.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--paper);
  border: 1px solid var(--navy);
  font: 600 14.5px var(--sans);
  padding: 11px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-gold {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
}
.btn-gold:hover { background: #d4ae4f; color: var(--navy); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--hair2);
  color: var(--navy);
  font: 500 14.5px var(--sans);
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Hero ---------- */

.hero {
  padding: 48px 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: end;
}
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 12px;
}
.hero h1,
.page-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 500;
}
.hero-side p,
.lede {
  color: var(--body);
  margin: 0 0 18px;
  max-width: 48ch;
}
.page-hero {
  padding: 40px 0 10px;
  max-width: 46rem;
}

/* ---------- Sections ---------- */

.section { padding: 28px 0 40px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.section-head h2,
.prose h2,
.article-body h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.stat-grid,
.card-grid,
.point-grid {
  display: grid;
  gap: 14px;
}
.point-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card,
.point,
.note-card,
.form-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 20px 20px 18px;
}
.form-card { position: relative; }
.point h2,
.card h2,
.note-card h2,
.point h3,
.card h3,
.note-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}
.point p,
.card p,
.note-card p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
}

.prose { max-width: 46rem; }
.prose p,
.article-body p {
  margin: 0 0 16px;
  color: var(--body);
}
.prose ul,
.article-body ul { margin: 0 0 16px; padding-left: 1.2rem; color: var(--body); }
.article-body li { margin: 0 0 6px; }

/* ---------- Pricing ---------- */

.price-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 22px;
}
.price-tile {
  background: var(--navy);
  color: #e8eef6;
  border-radius: 14px;
  padding: 24px;
}
.price-tile.alt {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hair);
}
.price-tile .amt {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 48px);
  font-weight: 600;
  line-height: 1;
  margin: 6px 0 10px;
  color: var(--accent);
}
.price-tile.alt .amt { color: var(--navy); }
.price-tile p { margin: 0; font-size: 14.5px; color: #c5cedb; }
.price-tile.alt p { color: var(--body); }
.price-tile .lbl {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.price-tile.alt .lbl { color: var(--accent-ink); }

.fee-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.fee-table th,
.fee-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.fee-table th {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--panel);
}
.fee-table td { font-size: 15px; color: var(--body); }
.fee-table tr:last-child td { border-bottom: none; }
.fee-table .amt { font-weight: 700; color: var(--navy); white-space: nowrap; }
/* On narrow screens the table can be wider than the page, so its wrapper scrolls sideways.
   The wrapper is a labeled, focusable region (tabindex="0" in build.mjs) so keyboard users
   can reach it and scroll it with the arrow keys (WCAG 2.1.1). Scrolling the wrapper instead
   of the table keeps the table a table for screen readers. */
.table-scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 12px; }

.caveat {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--hair);
}
.caveat li { margin: 0 0 8px; color: var(--body); font-size: 14.5px; }
.caveat li:last-child { margin-bottom: 0; }

.source-link { font-size: 13px; font-weight: 600; }

/* ---------- News / article ---------- */

.article { max-width: 42rem; padding: 36px 0 20px; }
.article h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.standfirst {
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--body);
  margin: 0 0 14px;
}
.byline {
  font-size: 13px;
  color: var(--faint);
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.article-body { font-size: 17.5px; overflow-wrap: anywhere; }
.news-list { display: grid; gap: 0; }
.list-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}
.list-item h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}
.list-item h2 a { color: var(--ink); text-decoration: none; }
.list-item h2 a:hover { color: var(--accent-ink); }
.sources {
  margin-top: 28px;
  border-top: 1px solid var(--hair);
  padding-top: 16px;
}
.sources h3 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.sources ul { margin: 0; padding-left: 18px; }
.sources li { font-size: 14px; color: var(--muted); margin-bottom: 6px; }

.disclaimer-box {
  margin-top: 28px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair2);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 16px var(--sans);
}
.field textarea { min-height: 140px; resize: vertical; }
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note { font-size: 13px; color: var(--faint); margin: 12px 0 0; }
.verify-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}
#verify-status { font-size: 13.5px; color: var(--muted); }
#verify-status.verify-ok { color: var(--ok); font-weight: 600; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.form-alert { border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 14px 0 0; }
.alert-ok { background: rgba(46, 107, 63, 0.1); border: 1px solid var(--ok); color: #24532f; }
.alert-err { background: rgba(179, 64, 58, 0.1); border: 1px solid #b3403a; color: #8a2f2b; }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.contact-dl { margin: 0; }
.contact-dl div { margin: 0 0 12px; }
.contact-dl dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
.contact-dl dd { margin: 2px 0 0; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: #c5cedb;
  margin-top: 24px;
}
.site-footer .wrap {
  padding: 28px 0 34px;
  display: grid;
  gap: 16px;
}
.site-footer .wordmark { color: #f3efe6; font-size: 12px; }
.site-footer .wordmark em { color: var(--accent); }
.site-footer p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  max-width: 78ch;
  color: #9aa6b8;
}
.foot-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
}
.foot-meta a { color: var(--accent); text-decoration: none; }
.foot-meta a:hover { color: #f3e3b5; }

/* ---------- 404 ---------- */

.empty {
  padding: 72px 0 90px;
  max-width: 36rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero,
  .contact-grid,
  .price-hero,
  .point-grid,
  .card-grid {
    grid-template-columns: 1fr;
  }
  .nav-toggle { display: inline-flex; align-items: center; }
  .header-actions { margin-left: auto; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 12px 24px rgba(12, 29, 51, 0.08);
    padding: 14px var(--gutter) 18px;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    gap: 12px;
  }
  .site-header.is-open .site-nav { display: flex; }
  .hero { padding-top: 32px; }
  .table-scroll { overflow-x: auto; }
}

/* Below 381px the header row (wordmark, Call Us, Menu) was wider than the screen: at 320px the
   Menu button ran about 20px off the edge and the page scrolled sideways (WCAG 1.4.10). Tighter
   spacing keeps it on one row. */
@media (max-width: 380px) {
  .site-header > .wrap { gap: 12px; }
  .wordmark { letter-spacing: 0.06em; }
  .header-actions { gap: 6px; }
  .btn-call { padding: 8px 10px; }
}

@media (min-width: 861px) {
  .nav-toggle { display: none !important; }
  .site-nav { display: flex !important; }
}