/* ============================================================
   PropertyTitles.com — Design polish layer
   Sits on top of the precompiled Tailwind CSS in /css/style.css.
   ============================================================ */

:root {
  --pt-navy: #1a2744;
  --pt-navy-2: #1e3050;
  --pt-navy-hover: #243352;
  --pt-gold: #c9953c;
  --pt-gold-hover: #b8862f;
  --pt-ink: #1a2744;
  --pt-text: #4a4a4a;
  --pt-bg-soft: #f8f9fb;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { image-rendering: -webkit-optimize-contrast; }

::selection {
  background: rgba(201, 149, 60, 0.28);
  color: var(--pt-navy);
}

/* Keyboard focus — visible, branded, never on mouse clicks */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--pt-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(201, 149, 60, 0.22);
  outline-offset: 3px;
}

/* ============================================================
   HERO BANNERS — replace the flat gradient with depth
   ============================================================ */

/* Dark navy hero (services, about, status, compliance, etc.) */
.pt-hero-dark {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,149,60,0.16), transparent 65%),
    radial-gradient(circle at 15% 100%, rgba(201,149,60,0.10), transparent 50%),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,0.05), transparent 45%),
    linear-gradient(135deg, #1a2744 0%, #1e3050 55%, #1a2744 100%);
  overflow: hidden;
  isolation: isolate;
}
.pt-hero-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 90%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.pt-hero-dark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,149,60,0.45), transparent);
  z-index: 0;
}
.pt-hero-dark > * { position: relative; z-index: 1; }

/* Soft hero (title-search, pricing, contact) */
.pt-hero-soft {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201,149,60,0.06), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, rgba(26,39,68,0.04) 100%);
  overflow: hidden;
  isolation: isolate;
}
.pt-hero-soft::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26,39,68,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 80%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.pt-hero-soft > * { position: relative; z-index: 1; }

/* Solid navy CTA / band — same depth treatment */
.pt-band-navy {
  position: relative;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(201,149,60,0.10), transparent 70%),
    linear-gradient(135deg, #1a2744 0%, #1e3050 50%, #1a2744 100%);
  overflow: hidden;
  isolation: isolate;
}
.pt-band-navy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}
.pt-band-navy > * { position: relative; z-index: 1; }

/* ============================================================
   EYEBROW LABELS — small branded tag above headings
   ============================================================ */
.pt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(201, 149, 60, 0.12);
  border: 1px solid rgba(201, 149, 60, 0.28);
  color: var(--pt-gold);
  font-family: Inter, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 18px;
  white-space: nowrap;
}
.pt-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pt-gold);
  box-shadow: 0 0 0 3px rgba(201, 149, 60, 0.20);
  flex: 0 0 auto;
}
.pt-hero-soft .pt-eyebrow {
  background: rgba(26,39,68,0.06);
  border-color: rgba(26,39,68,0.14);
  color: var(--pt-navy);
}
.pt-hero-soft .pt-eyebrow::before {
  background: var(--pt-navy);
  box-shadow: 0 0 0 3px rgba(26,39,68,0.10);
}

/* ============================================================
   CARD POLISH — smooth lift on hover
   ============================================================ */
.pt-card {
  transition: transform 260ms cubic-bezier(.2,.7,.2,1),
              box-shadow 260ms ease,
              border-color 260ms ease;
  will-change: transform;
}
.pt-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px -12px rgba(26,39,68,0.18),
    0 4px 10px -4px rgba(26,39,68,0.08);
  border-color: rgba(201,149,60,0.35) !important;
}

/* Stronger lift for primary feature cards */
.pt-card-feature:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 40px -16px rgba(26,39,68,0.22),
    0 6px 14px -6px rgba(26,39,68,0.10);
}

/* ============================================================
   BUTTON POLISH — gold + navy
   ============================================================ */
.pt-btn-gold {
  background: linear-gradient(180deg, #d4a045 0%, #c9953c 50%, #bb8930 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 8px 18px -8px rgba(201,149,60,0.55),
    0 2px 4px rgba(26,39,68,0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.pt-btn-gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.26) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 14px 24px -8px rgba(201,149,60,0.62),
    0 3px 6px rgba(26,39,68,0.22);
}
.pt-btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.pt-btn-navy {
  background: linear-gradient(180deg, #25355a 0%, #1a2744 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 14px -6px rgba(26,39,68,0.45),
    0 2px 4px rgba(0,0,0,0.10);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.pt-btn-navy:hover {
  transform: translateY(-1px);
  filter: brightness(1.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 12px 22px -6px rgba(26,39,68,0.55),
    0 3px 6px rgba(0,0,0,0.14);
}
.pt-btn-navy:active { transform: translateY(0); }

/* ============================================================
   INPUTS — branded focus ring
   ============================================================ */
.pt-input {
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pt-input:hover { border-color: rgba(201,149,60,0.40); }
.pt-input:focus,
.pt-input:focus-visible {
  outline: none;
  border-color: var(--pt-gold);
  box-shadow: 0 0 0 4px rgba(201,149,60,0.18);
}

/* ============================================================
   ANCHOR ARROW MICRO-INTERACTION
   ============================================================ */
.pt-link-arrow svg {
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.pt-link-arrow:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   STATS BAR — subtle gold underline + animation
   ============================================================ */
.pt-stat-value {
  background: linear-gradient(180deg, #e0a948 0%, #c9953c 70%, #ad7d2a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(201,149,60,0.22));
}

/* ============================================================
   TESTIMONIAL CARDS — quote depth
   ============================================================ */
.pt-quote-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);
  border: 1px solid rgba(26,39,68,0.08);
  box-shadow: 0 4px 14px -8px rgba(26,39,68,0.10);
}

/* ============================================================
   PRICING — Enterprise "Custom" rendering
   ============================================================ */
.pt-price-custom {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.pt-price-custom > .pt-price-word {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--pt-navy);
  line-height: 1;
}
.pt-price-custom > .pt-price-sub {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #595959;
  letter-spacing: -0.2px;
}

/* Highlighted plan ring shimmer */
.pt-plan-highlight {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(201,149,60,0.55),
    0 24px 48px -20px rgba(26,39,68,0.45),
    0 8px 18px -8px rgba(26,39,68,0.25);
}
.pt-plan-highlight::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(201,149,60,0.85), rgba(201,149,60,0.20));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   DETAILS / SUMMARY — clean, no default marker
   ============================================================ */
details summary::-webkit-details-marker { display: none; }
details summary { outline: none; }
details[open] summary { color: var(--pt-gold); }

/* ============================================================
   FOOTER — subtle hover glow on links
   ============================================================ */
footer a {
  transition: color 150ms ease;
}
footer a:hover { color: var(--pt-gold) !important; }

/* ============================================================
   NAV — animated underline on hover (desktop only)
   ============================================================ */
@media (min-width: 1024px) {
  #site-header nav a[href]:not([class*="bg-"]) {
    position: relative;
  }
  #site-header nav a[href]:not([class*="bg-"])::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--pt-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
    border-radius: 2px;
  }
  #site-header nav a[href]:not([class*="bg-"]):hover::after,
  #site-header nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* ============================================================
   SCROLL REVEAL (opt-in via .pt-reveal)
   ============================================================ */
.pt-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
}
.pt-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pt-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .pt-card,
  .pt-card:hover,
  .pt-card-feature:hover,
  .pt-btn-gold,
  .pt-btn-gold:hover,
  .pt-btn-gold:active,
  .pt-btn-navy,
  .pt-btn-navy:hover,
  .pt-btn-navy:active,
  .pt-link-arrow svg,
  .pt-link-arrow:hover svg,
  .pt-trust-name,
  .pt-trust-name:hover,
  #site-header nav a[href]:not([class*="bg-"])::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.pt-trust-strip {
  background: #ffffff;
  border-top: 1px solid rgba(26,39,68,0.06);
  border-bottom: 1px solid rgba(26,39,68,0.06);
}
.pt-trust-name {
  position: relative;
  color: #5a6478;
  transition: color 200ms ease, transform 200ms ease;
}
.pt-trust-name:hover {
  color: var(--pt-navy);
  transform: translateY(-1px);
}