/* Shared styles for the public section pages (product, practice areas, trust, pricing), 2026-10-11.
   They deliberately reuse the landing page's look: graphite stage with gold glows, a masked dot grid and
   drifting light rays behind each hero, gradient-filled Fraunces headlines, tiles that match the homepage
   tool cards (gradient fill, hairline ring, ), pill buttons with a gold-metal finish.
   Load /premium.css AFTER this file (grain, warm greys, headline gradient). */
:root {
  --black: #050508; --ink: #0d0d14; --surface: #111118; --border: #1e1e2a; --border2: #2a2a38;
  --mid: #8a8aa8; --text: #d8d8e8; --white: #f0f0f8; --gold: #c9a84c; --gold2: #e8c46a;
  --ease: cubic-bezier(.32,.72,0,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--black); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin-top: 0; }
::selection { background: rgba(201,168,76,.25); color: #fff; }
.pg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); position: relative; z-index: 1; }

/* Reveal on scroll (only when the script has run) */
.pg-js .pg-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.pg-js .pg-reveal.visible { opacity: 1; transform: none; }

/* Section label with gold rules, as on the homepage */
.pg-kicker { display: inline-flex; align-items: center; gap: .7rem; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.pg-kicker::before, .pg-kicker::after { content: ''; width: 26px; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,.5)); }
.pg-kicker::after { background: linear-gradient(to left, transparent, rgba(201,168,76,.5)); }
.pg-row .pg-kicker { margin-bottom: .9rem; }
.pg-row .pg-kicker::before { display: none; }

/* Hero: gold glows, masked dot grid, drifting light rays */
.pg-hero { padding: clamp(7.5rem, 12vw, 11rem) 0 clamp(3.5rem, 6vw, 5.5rem); text-align: center; position: relative; overflow: hidden; }
.pg-hero::before {
  content: ''; position: absolute; inset: -10% -5% 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 72% 30%, rgba(201,168,76,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 25% 80%, rgba(201,168,76,.05) 0%, transparent 70%),
    conic-gradient(from 178deg at 74% -10%, transparent 0deg, rgba(201,168,76,.05) 4deg, transparent 9deg, transparent 14deg, rgba(201,168,76,.04) 18deg, transparent 24deg, transparent 30deg, rgba(232,196,106,.05) 33deg, transparent 38deg);
  filter: blur(4px); animation: pgRays 16s ease-in-out infinite alternate;
}
.pg-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(201,168,76,.14) 1px, transparent 1px); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 100%);
}
@keyframes pgRays { from { transform: translateX(0); opacity: .85; } to { transform: translateX(-30px); opacity: 1; } }
.pg-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.04; letter-spacing: -.012em; margin: 0 auto; max-width: 17ch; text-wrap: balance; }
.pg-sub { max-width: 58ch; margin: 1.5rem auto 0; font-size: clamp(1rem, 1.5vw, 1.15rem); color: #a1a1a6; line-height: 1.75; }
.pg-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }

/* Headlines: bright to warm silver, italics in gold */
.pg-h1, .pg-h2 { font-optical-sizing: none; font-variation-settings: 'opsz' 110; background: linear-gradient(180deg, #ffffff 25%, #c9c4b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pg-h1 em, .pg-h2 em { font-style: italic; background: linear-gradient(95deg, #f6e3a1 0%, #d9b653 45%, #a8842e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: .04em; }

/* Buttons: pill, gold metal with one slow sweep; ghost is frosted glass */
.pg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; padding: .85rem 1.8rem; border-radius: 980px; border: 1px solid; font-family: inherit; cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .2s, color .2s; }
.pg-btn-gold { color: #050508; border-color: var(--gold); background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 55%, var(--gold) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(110,80,15,.4), 0 1px 2px rgba(0,0,0,.5); }
.pg-btn-gold::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); transition: left 1s var(--ease); pointer-events: none; }
.pg-btn-gold:hover::after { left: 150%; }
.pg-btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(110,80,15,.4), 0 14px 40px rgba(201,168,76,.28), 0 2px 6px rgba(0,0,0,.5); }
.pg-btn-ghost { color: var(--text); border-color: rgba(255,255,255,.1); background: rgba(51,51,54,.42); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
.pg-btn-ghost:hover { border-color: rgba(201,168,76,.5); color: var(--gold2); transform: translateY(-2px); }
.pg-btn:focus-visible { outline: 2px solid rgba(232,196,106,.9); outline-offset: 3px; }

/* Sections */
.pg-sec { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--border); position: relative; }
.pg-sec-head { max-width: 720px; margin: 0 0 3rem; }
.pg-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.pg-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(1.9rem, 3.8vw, 3.3rem); line-height: 1.07; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
.pg-lead { font-size: .98rem; color: #a1a1a6; line-height: 1.75; margin: 0; }

/* Tiles: the same recipe as the homepage tool cards */
.pg-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)) }
.pg-tile, .pg-panel {
  position: relative; overflow: hidden; border-radius: 28px; border: 1px solid transparent;
  background: linear-gradient(180deg, #17171a, #101012); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: scale .6s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.pg-tile { padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; }
.pg-panel { padding: 1.9rem; min-height: 220px; }
.pg-tile::after, .pg-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; transition: opacity .5s var(--ease);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.015) 40%, rgba(201,168,76,.07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pg-tile:hover, .pg-panel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(201,168,76,.07); scale: 1.02; }
.pg-tile:hover::after, .pg-panel:hover::after { background: linear-gradient(180deg, rgba(232,196,106,.5), rgba(255,255,255,.04) 45%, rgba(201,168,76,.2)); }
.pg-tile > *, .pg-panel > * { position: relative; }
.pg-tile h3 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 400; color: var(--white); letter-spacing: -.01em; }
.pg-tile p { margin: 0; font-size: .88rem; color: #a1a1a6; line-height: 1.7; }
.pg-tile .pg-more { margin-top: auto; padding-top: .8rem; font-size: .82rem; font-weight: 600; color: var(--gold2); }
.pg-ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; background: linear-gradient(145deg, rgba(201,168,76,.15), rgba(201,168,76,.04)); border: 1px solid rgba(201,168,76,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.35); }
.pg-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--gold2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-badge { display: inline-block; align-self: flex-start; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,168,76,.25); border-radius: 4px; padding: .18rem .55rem; }

/* Feature rows: text on one side, a quiet detail panel on the other */
.pg-row { display: grid; gap: clamp(1.5rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(2.4rem, 5vw, 4rem) 0; }
.pg-row + .pg-row { border-top: 1px solid var(--border); }
.pg-row.flip > :first-child { order: 2; }
.pg-row h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(1.55rem, 2.9vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; color: var(--white); margin: 0 0 .9rem; }
.pg-row p { margin: 0 0 .8rem; color: #a1a1a6; line-height: 1.75; }
.pg-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.pg-list li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--text); line-height: 1.6; }
.pg-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(201,168,76,.5); }
.pg-panel .pg-eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6e6e73; margin: 0 0 1rem; }
.pg-chip { display: inline-block; font-size: .78rem; border: 1px solid #333336; border-radius: 980px; padding: .3rem .85rem; margin: 0 .35rem .5rem 0; color: var(--text); }
.pg-chip.on { border-color: rgba(201,168,76,.5); color: var(--gold2); background: rgba(201,168,76,.06); }
.pg-note { font-size: .78rem; color: #8e8e93; margin-top: 1.2rem; line-height: 1.6; }

/* Closing band with the homepage's slow breathing glow */
.pg-cta { text-align: center; padding: clamp(5rem, 9vw, 8rem) 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.pg-cta::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; max-width: 150vw; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 65%); pointer-events: none; animation: pgBreathe 6s ease-in-out infinite; }
@keyframes pgBreathe { 0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
.pg-cta .pg-h2 { max-width: 18ch; margin-left: auto; margin-right: auto; font-size: clamp(2.2rem, 5vw, 4.2rem); }

/* Footer */
.pg-foot { border-top: 1px solid var(--border); padding: 2.2rem 0 3rem; font-size: .78rem; color: #8e8e93; }
.pg-foot .pg-wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; justify-content: space-between; }
.pg-foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.pg-foot a { transition: color .2s; }
.pg-foot a:hover { color: var(--gold2); }

@media (max-width: 820px) {
  .pg-row { grid-template-columns: 1fr; }
  .pg-row.flip > :first-child { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pg-hero::before, .pg-cta::before { animation: none; }
  .pg-js .pg-reveal { opacity: 1; transform: none; transition: none; }
  .pg-tile, .pg-panel, .pg-btn { transition: none; }
  .pg-tile:hover, .pg-panel:hover { scale: 1; }
}

/* Four tiles across (product overview), two on tablets, one on phones */
.pg-grid.pg-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .pg-grid.pg-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pg-grid.pg-grid-4 { grid-template-columns: 1fr; } }

/* Three tiles across (product overview) */
.pg-grid.pg-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pg-grid.pg-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pg-grid.pg-grid-3 { grid-template-columns: 1fr; } }