/* ═══════════════════════════════════════════════════════════════════
   GB Caprock CPAs, PLLC — shared site styles
   Static site, no build step. Source of truth for the visual design:
   the "GB Caprock CPAs branding" Claude Design project (Website *.dc.html).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --ink:        #081728;  /* darkest navy — nav/footer/body backdrop   */
  --navy:       #0F2747;  /* panel navy — heroes, headers, CTA bands   */
  --paper:      #FDFBF6;  /* page background                           */
  --cream:      #F2E8D8;  /* warm section background / light text     */
  --card:       #FBF7EE;  /* card background                           */
  --gold:       #C8A15A;
  --gold-hover: #D9B570;
  --gold-light: #F6C87A;
  --bronze:     #96501A;  /* kickers + links on light backgrounds (>=4.5:1 on cream) */
  --rust:       #C65A2E;
  --rust-hover: #D96835;
  --amber:      #E08A38;  /* links on dark backgrounds                 */
  --amber-deep: #CC8038;  /* footer column headings / tagline          */
  --body-brown: #4A4438;  /* body copy on light backgrounds            */
  --slate:      #22303F;  /* list / detail text on light backgrounds   */
  --muted-blue: #7B8FA6;  /* muted footer text                         */
  --ph-ink:     #8A8577;  /* placeholder / italic notes                */
  --cream-hi:   #F7F1E4;  /* headline cream on navy                    */

  --bronze-mix: color-mix(in srgb, #C8A15A 55%, transparent);
  --hair-gold-18: rgba(200, 161, 90, 0.18);
  --hair-gold-25: rgba(200, 161, 90, 0.25);
  --hair-gold-35: rgba(200, 161, 90, 0.35);
  --hair-brown-22: rgba(140, 98, 57, 0.22);
  --hair-brown-25: rgba(140, 98, 57, 0.25);
  --hair-brown-35: rgba(140, 98, 57, 0.35);

  --serif: 'Cinzel', 'Times New Roman', serif;
  --sans:  'Archivo', 'Segoe UI', sans-serif;

  /* horizontal gutter — tightens on small screens */
  --px: 72px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  font-family: var(--sans);
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--gold-light); }

img { max-width: 100%; }

input, select, textarea, button { font-family: var(--sans); }

main { display: block; background: var(--paper); }

/* visible keyboard-focus indicator (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* screen-reader-only text (e.g. the form's live status region) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

site-nav, site-footer { display: block; }

h1, h2, h3 { margin: 0; font-weight: inherit; }
p { margin: 0; }

/* ── shared atoms ──────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}
.btn-rust { background: linear-gradient(180deg, #A94F14 0%, #B2561A 100%); color: #FFF7EC; }
.btn-rust:hover { background: linear-gradient(180deg, #93450F 0%, #9C4B16 100%); color: #FFF7EC; }
.btn-gold { background: var(--gold); color: var(--ink); padding: 15px 28px; }
.btn-gold:hover { background: var(--gold-hover); color: var(--ink); }
.btn-outline {
  border: 1.5px solid rgba(242, 232, 216, 0.7);
  color: var(--cream);
  padding: 15px 28px;
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--cream);
  background: rgba(242, 232, 216, 0.08);
  color: #FFFFFF;
}

.kicker {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--bronze);
  font-weight: 600;
}

.gold-rule {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #E9A759 0%, #A2661F 42%, rgba(162, 102, 31, 0) 100%);
}

/* gradient diamond bullets */
.diamond {
  background: linear-gradient(135deg, #E9A759, #A2661F);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.d7  { width: 7px;  height: 7px;  }
.d10 { width: 10px; height: 10px; }
.d12 { width: 12px; height: 12px; }
.diamond-solid {
  width: 6px; height: 6px;
  background: #8C6239;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--hair-brown-25);
  border-radius: 6px;
}

/* text link on light sections: EXPLORE … → */
.arrow-link {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--bronze);
}
.arrow-link:hover { color: var(--navy); }

/* ── page header (Attest / Advisory / About / Contact) ─────────── */

.page-header { background: var(--navy); padding: 72px var(--px) 64px; }
.page-header .inner { max-width: 1200px; margin: 0 auto; }
.crumbs { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.crumbs a { color: var(--gold); }
.crumbs a:hover { color: var(--gold-light); }
.page-header h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 52px;
  color: var(--cream-hi);
  margin: 14px 0 10px;
}
.page-header .gold-rule { margin-bottom: 18px; }
.page-header .lede {
  font-size: 17px;
  color: rgba(242, 232, 216, 0.9);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── CTA band ───────────────────────────────────────────────────── */

.cta-band {
  background: var(--navy);
  padding: 72px var(--px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-band h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  color: var(--cream-hi);
  text-align: center;
}
.cta-band .cta-sub { font-size: 15px; color: rgba(242, 232, 216, 0.8); text-align: center; }
.cta-band .btn { margin-top: 8px; }

/* ── site nav ───────────────────────────────────────────────────── */

site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 48px;
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--hair-gold-18); /* fallback */
  border-bottom: 1px solid var(--bronze-mix);
  gap: 18px;
  flex-wrap: wrap;
}
.site-nav.is-scrolled { box-shadow: 0 16px 34px rgba(2, 8, 16, 0.55); }
/* leather background: lightest behind the logo, darkening across */
.nav-bg-base {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, #050E1B 0%, #0E2745 21%, #0B1F37 50%, #081728 77%, #050E1B 100%);
}
.nav-bg-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 680px 300px at 215px 54%, rgba(200, 127, 59, 0.07) 0%, rgba(200, 127, 59, 0) 70%);
}
.leather-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.nav-logo { display: block; }
.nav-logo .logo-h { zoom: 0.7; }
.nav-links { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.nav-link {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #F1E3CE;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--gold-light); }
.nav-link.is-active { border-bottom-color: var(--gold); }

.nav-svc { position: relative; }
.nav-svc-btn {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #F1E3CE;
  padding: 6px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}
.nav-svc-btn:hover { color: var(--gold-light); }
.nav-svc-btn.is-active { border-bottom-color: var(--gold); }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -22px;
  padding-top: 10px;
  z-index: 60;
}
.nav-svc:hover .nav-dropdown,
.nav-svc:focus-within .nav-dropdown { display: block; }
.nav-menu {
  background: var(--navy);
  border: 1px solid var(--hair-gold-35);
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(2, 8, 16, 0.55);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
}
.nav-menu a {
  font-size: 12.5px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #F1E3CE;
  padding: 15px 22px;
}
.nav-menu a:first-child { border-bottom: 1px solid var(--hair-gold-18); }
.nav-menu a:hover { background: rgba(200, 161, 90, 0.1); color: var(--gold-light); }
.nav-cta {
  font-size: 13px;
  letter-spacing: 2px;
  color: #FFF7EC;
  font-weight: 600;
  background: linear-gradient(180deg, #A94F14 0%, #B2561A 100%);
  padding: 13px 24px;
  border-radius: 3px;
}
.nav-cta:hover { background: linear-gradient(180deg, #93450F 0%, #9C4B16 100%); color: #FFFFFF; }

/* ── horizontal logo (nav + footer) ─────────────────────────────── */

.logo-h { display: flex; align-items: center; gap: 22px; }
.logo-divider { width: 1.5px; align-self: stretch; background: #C87A32; }
.logo-word { display: flex; flex-direction: column; gap: 5px; }
.logo-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #F3B368 0%, #E07D2A 45%, #A85815 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-cpa-row { display: flex; align-items: center; gap: 8px; }
.logo-cpa {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3.5px;
  color: #E8862F;
}
.logo-cpa-line { flex: 1; height: 1.5px; background: linear-gradient(to right, #C87A32, transparent); }
.logo-tag {
  font-size: 10px;
  letter-spacing: 3px;
  color: #C97A2E;
  margin-top: 2px;
  font-family: var(--sans);
}

/* ── site footer ────────────────────────────────────────────────── */

.site-footer {
  background: linear-gradient(100deg, #050E1B 0%, #0C2138 18%, #081728 55%, #060F1D 100%);
  padding: 52px var(--px) 36px;
  border-top: 1px solid var(--hair-gold-18); /* fallback */
  border-top: 1px solid var(--bronze-mix);
  position: relative;
  z-index: 0;
}
.ft-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.ft-brand { display: flex; flex-direction: column; gap: 16px; }
.ft-brand .logo-h { zoom: 0.78; }
.ft-blurb { font-size: 12.5px; color: var(--muted-blue); max-width: 340px; line-height: 1.6; }
.ft-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ft-col { display: flex; flex-direction: column; gap: 9px; }
.ft-h {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--amber-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.ft-h + .ft-h, .ft-col .ft-h.ft-h-mid { margin: 10px 0 4px; }
.ft-col a { font-size: 14px; }
.ft-col a.ft-page-link { color: #F1E3CE; }
.ft-col a.ft-page-link:hover { color: var(--gold-light); }
.ft-line { font-size: 14px; color: #F1E3CE; }
.ft-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  border-top: 1px solid var(--hair-gold-25);
  padding-top: 18px;
  font-size: 12px;
  color: var(--muted-blue);
}

/* ── headshot slot (drop real photos into assets/img/) ───────────
   Emblem-gradient ring around each partner circle; underneath the photo
   sits a leather-navy monogram fallback that only shows if the photo is
   missing (photos layer on top and cover it). */

.pt-ring {
  width: 156px;
  height: 156px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(160deg, #F7C982 0%, #F09A48 16%, #D0691F 45%, #9C4E14 75%, #5E2E0C 100%);
}
.pt-mat {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--paper);
}
.partner-card .pt-mat { background: var(--card); }
.headshot {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}
.headshot-fallback {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #0E2745 0%, #0B1F37 55%, #081728 100%);
}
.grain-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: soft-light;
}
.headshot-mono-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headshot-mono {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: 2px;
  color: #E8862F; /* 5.65:1+ on every navy stop behind it */
}
.headshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── homepage ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 600px;
  background-color: var(--navy);
  /* Layer 1: the real photo (drop it at assets/img/west-texas-sunset.jpg).
     Layer 2: a West Texas sunset gradient fallback shown until the photo exists. */
  background-image:
    url("img/west-texas-sunset.jpg"),
    linear-gradient(180deg, #16294a 0%, #3d4d74 30%, #8a5a68 48%, #c96f3e 62%, #e9a759 72%, #a25c22 80%, #47301c 90%, #241a12 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 23, 40, 0.92) 0%, rgba(8, 23, 40, 0.55) 48%, rgba(8, 23, 40, 0.12) 100%);
  pointer-events: none;
}
.hero-content {
  position: absolute;
  left: var(--px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 640px;
}
.hero-content h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.14;
  color: var(--cream-hi);
}
.hero-content .gold-rule { margin: 24px 0; }
.hero-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(242, 232, 216, 0.92);
  max-width: 500px;
  text-wrap: pretty;
}
.hero-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.trust-strip {
  background: linear-gradient(100deg, #050E1B 0%, #112A4C 20%, #0F2747 60%, #050E1B 100%);
  border-top: 1px solid var(--hair-gold-25); /* fallback */
  border-top: 1px solid var(--bronze-mix);
  border-bottom: 1px solid var(--bronze-mix);
  padding: 18px var(--px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 0;
}
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-item span { font-size: 13px; letter-spacing: 2px; color: var(--cream); }

.svc-lines { background: var(--cream); padding: 92px var(--px); }
.svc-lines .inner { max-width: 1200px; margin: 0 auto; }
.svc-lines h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  color: var(--navy);
  margin: 12px 0 8px;
}
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.svc-card { padding: 42px 40px; display: flex; flex-direction: column; gap: 16px; }
.svc-eyebrow {
  font-size: 12px;
  letter-spacing: 3.5px;
  color: var(--bronze);
  font-weight: 600;
}
.svc-card h3 { font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--navy); }
.svc-card .svc-desc { font-size: 15px; line-height: 1.65; color: var(--body-brown); text-wrap: pretty; }
.svc-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.svc-list li { display: flex; align-items: center; gap: 12px; list-style: none; }
.svc-list { padding: 0; margin-bottom: 0; }
.svc-list li span { font-size: 14.5px; color: var(--slate); }
.svc-card .arrow-link { margin-top: 10px; }

.partners-teaser { background: var(--paper); padding: 88px var(--px); }
.partners-teaser .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.teaser-shots { display: flex; gap: 24px; }
.teaser-copy { flex: 1; min-width: 380px; }
.teaser-copy h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  color: var(--navy);
  margin: 10px 0;
}
.teaser-copy p {
  font-size: 15.5px;
  color: var(--body-brown);
  line-height: 1.65;
  max-width: 560px;
  text-wrap: pretty;
}
.teaser-copy .arrow-link { display: inline-block; margin-top: 18px; }

.home-cta {
  background: var(--navy);
  padding: 80px var(--px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.home-cta .logo-mark { zoom: 0.72; }
.home-cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  color: var(--cream-hi);
  text-align: center;
}
.home-cta .btn { margin-top: 8px; }

/* ── attest page ────────────────────────────────────────────────── */

.attest-services { background: var(--cream); padding: 88px var(--px); }
.attest-services .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.attest-card { padding: 36px 34px; }
.attest-card .diamond { margin-bottom: 18px; }
.attest-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  color: var(--navy);
  margin-bottom: 10px;
}
.attest-card p { font-size: 14.5px; line-height: 1.65; color: var(--body-brown); text-wrap: pretty; }

.levels { background: var(--paper); padding: 84px var(--px); }
.levels .inner { max-width: 1000px; margin: 0 auto; }
.levels h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  color: var(--navy);
  margin: 12px 0 30px;
}
.level-rows { display: flex; flex-direction: column; gap: 14px; }
.level-row {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #FFFFFF;
  border: 1px solid var(--hair-brown-22);
  border-radius: 6px;
  padding: 22px 28px;
}
.level-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  width: 150px;
  flex-shrink: 0;
}
.level-desc { flex: 1; font-size: 14.5px; color: var(--body-brown); line-height: 1.55; }
.levels-note { font-size: 14px; color: var(--body-brown); margin-top: 22px; }
.levels-note a { color: var(--bronze); font-weight: 600; }
.levels-note a:hover { color: var(--navy); }

/* ── advisory page ──────────────────────────────────────────────── */

/* flagship: the Financial Readiness Program */
.arp { background: var(--paper); padding: 88px var(--px); }
.arp .inner { max-width: 1200px; margin: 0 auto; }
.arp h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  color: var(--navy);
  margin: 12px 0 18px;
}
.arp-intro {
  font-size: 16.5px;
  color: var(--body-brown);
  line-height: 1.7;
  max-width: 900px;
  text-wrap: pretty;
}
.arp-tiers { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.tier-card {
  background: #FFFFFF;
  border: 1px solid var(--hair-brown-25);
  border-radius: 6px;
  padding: 26px 30px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.tier-card .diamond { margin-top: 7px; }
.tier-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 6px;
}
.tier-card p { font-size: 14.5px; line-height: 1.65; color: var(--body-brown); max-width: 860px; text-wrap: pretty; }
.arp-note {
  font-size: 14px;
  color: #5A5449;
  font-style: italic;
  margin-top: 26px;
  line-height: 1.65;
  max-width: 860px;
  text-wrap: pretty;
}

.adv-services { background: var(--cream); padding: 88px var(--px); }
.adv-services .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.adv-head { margin-bottom: 14px; }
.adv-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  color: var(--navy);
  margin-top: 12px;
}
.adv-card { padding: 38px 40px; display: flex; gap: 36px; align-items: flex-start; }
.adv-card .diamond { margin-top: 8px; }
.adv-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 8px;
}
.adv-card p { font-size: 15px; line-height: 1.65; color: var(--body-brown); max-width: 820px; text-wrap: pretty; }

/* ── about page ─────────────────────────────────────────────────── */

.story { background: var(--paper); padding: 84px var(--px); }
.story .inner { max-width: 1200px; margin: 0 auto; }
.story h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  color: var(--navy);
  margin: 12px 0 10px;
}
.story p {
  font-size: 17px;
  color: var(--body-brown);
  line-height: 1.75;
  margin-top: 12px;
  max-width: 860px;
  text-wrap: pretty;
}

.partners-section { background: var(--cream); padding: 88px var(--px); }
.partners-section .inner { max-width: 1200px; margin: 0 auto; }
.partners-section .kicker { display: block; margin-bottom: 30px; }
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.partner-card { padding: 42px; display: flex; flex-direction: column; }
.partner-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--navy);
  margin-top: 22px;
}
.partner-role {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--bronze);
  font-weight: 600;
  margin-top: 6px;
}
.partner-bio {
  font-size: 14.5px;
  color: var(--body-brown);
  line-height: 1.7;
  margin-top: 18px;
  text-wrap: pretty;
}
.partner-creds {
  font-size: 13px;
  color: #8C6239;
  letter-spacing: 0.5px;
  margin-top: 14px;
}
.partner-contact { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; font-size: 14px; }
.partner-contact .phone { color: var(--slate); }
.partner-contact a { color: var(--bronze); }
.partner-contact a:hover { color: var(--navy); }

.values { background: var(--paper); padding: 84px var(--px); }
.values .inner { max-width: 1100px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.value-item .diamond { margin-bottom: 16px; }
.value-item h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}
.value-item p { font-size: 14.5px; color: var(--body-brown); line-height: 1.6; text-wrap: pretty; }

/* ── contact page ───────────────────────────────────────────────── */

.contact-section { background: var(--cream); padding: 84px var(--px); }
.contact-section .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: start;
}
.contact-form-card { padding: 44px; }
.contact-form-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 26px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.span2 { grid-column: 1 / -1; }
.field label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--bronze);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--hair-brown-35);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 13px 14px;
  font-size: 14.5px;
  color: var(--slate);
  outline: none;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #96501A;
  box-shadow: 0 0 0 3px rgba(150, 80, 26, 0.22);
}
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.form-error { font-size: 13px; color: #A8432E; line-height: 1.5; }

/* honeypot field — visually hidden, present for Netlify bot filtering */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* post-submit confirmation (swapped in by site.js) */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}
.form-success h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--navy);
}
.form-success p {
  font-size: 15px;
  color: var(--body-brown);
  line-height: 1.65;
  max-width: 460px;
  text-wrap: pretty;
}

[hidden] { display: none !important; }

.contact-aside { display: flex; flex-direction: column; gap: 22px; }
.direct-card {
  background: radial-gradient(ellipse at 50% 20%, #0C2038 0%, #081728 78%);
  border: 1px solid rgba(200, 122, 50, 0.45);
  border-radius: 6px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.direct-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7A3E10 0%, #E8862F 35%, #F7C982 50%, #C25E1B 75%, #6E3910 100%);
}
.direct-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  background: linear-gradient(180deg, #F3B368 0%, #E07D2A 45%, #A85815 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}
.direct-rule-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.direct-rule { width: 34px; height: 2px; background: linear-gradient(to right, #E9A759, rgba(233, 167, 89, 0)); }
.direct-list { display: flex; flex-direction: column; gap: 18px; }
.direct-entry { display: flex; gap: 14px; }
.direct-entry .diamond { width: 8px; height: 8px; margin-top: 5px; }
.direct-label {
  font-size: 12px;
  letter-spacing: 2.5px;
  color: #E9A759;
  font-weight: 600;
}
.direct-phone { font-size: 15px; color: var(--cream); margin-top: 5px; }
.direct-card a { font-size: 14px; }
.direct-sep { height: 1px; background: linear-gradient(to right, rgba(200, 122, 50, 0.4), rgba(200, 122, 50, 0.05)); }
.area-card {
  background: var(--navy);
  border: 1px solid var(--hair-gold-35);
  border-radius: 6px;
  padding: 32px;
}
.area-label {
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: 600;
}
.area-label + .area-label, .area-label.mt { margin-top: 18px; }
.area-text { font-size: 15px; color: var(--cream); margin-top: 8px; line-height: 1.6; }

/* ── digital business cards (/card/) ───────────────────────────────
   Mobile-first personal card pages; the leather-navy language from the
   site chrome, one column, thumb-sized actions. */

.card-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #050E1B 0%, #0E2745 30%, #0B1F37 62%, #081728 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 20px 40px;
  position: relative;
  z-index: 0;
}
.card-page .leather-grain { position: fixed; }
.card-col {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-page .pt-mat { background: #0B1F37; }
.card-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--cream-hi);
  margin-top: 24px;
}
.card-role {
  font-size: 12px;
  letter-spacing: 3px;
  color: #E9A759;
  font-weight: 600;
  margin-top: 7px;
}
.card-firm {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 12px;
  background: linear-gradient(180deg, #F3B368 0%, #E07D2A 45%, #A85815 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-rule {
  width: 34px;
  height: 2px;
  background: linear-gradient(to right, #E9A759, rgba(233, 167, 89, 0));
  margin-top: 18px;
}
.card-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.card-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 16px;
  border-radius: 4px;
}
.card-btn-primary {
  background: linear-gradient(180deg, #A94F14 0%, #B2561A 100%);
  color: #FFF7EC;
}
.card-btn-primary:hover { background: linear-gradient(180deg, #93450F 0%, #9C4B16 100%); color: #FFF7EC; }
.card-btn-ghost {
  color: #F1E3CE;
  border: 1.5px solid rgba(200, 161, 90, 0.45);
  background: rgba(255, 255, 255, 0.03);
}
.card-btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.card-qr {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px;
  margin-top: 32px;
  width: 178px;
}
.card-qr img { display: block; width: 100%; height: auto; }
.card-qr-cap {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: 600;
  margin-top: 12px;
}
.card-foot {
  margin-top: 36px;
  font-size: 12px;
  color: var(--muted-blue);
}
.card-foot a { color: var(--amber); }

/* hub page list */
.card-hub-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
}
.card-hub-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1.5px solid rgba(200, 161, 90, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.card-hub-item:hover { border-color: var(--gold-light); }
.card-hub-item .pt-ring { width: 62px; height: 62px; padding: 2px; }
.card-hub-item .headshot { width: 100%; height: 100%; }
.card-hub-item .headshot-mono { font-size: 20px; letter-spacing: 1px; }
.card-hub-name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--cream-hi); text-align: left; }
.card-hub-role { font-size: 11px; letter-spacing: 2px; color: #E9A759; font-weight: 600; margin-top: 3px; text-align: left; }

/* ── responsive collapse (conservative; desktop design is canonical) ── */

@media (max-width: 1080px) {
  :root { --px: 32px; }
  .svc-grid,
  .attest-services .inner,
  .partner-grid,
  .contact-section .inner { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .hero-content { right: var(--px); }
  .hero-content h1 { font-size: 46px; }
  .page-header h1 { font-size: 42px; }
  .teaser-copy { min-width: 0; }
  .site-nav { padding: 10px 20px; }
  .nav-links { gap: 20px; }
  .level-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .level-name { width: auto; }
}

@media (max-width: 560px) {
  :root { --px: 20px; }
  .hero-content h1 { font-size: 36px; }
  .partner-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .form-grid { grid-template-columns: 1fr; }
}