:root {
  /* Foundation Design Tokens - https://coastalkey-qpppx8pg.manus.space Master Deployment */
  --navy: #0B1629;
  --deep-navy: #06101F;
  --gold: #C9A227;
  --deep-gold: #A88A52;
  --sand: #D2C4A0;
  --white: #FFFFFF;
  --black: #000000;
  --border: rgba(197, 164, 110, 0.2);
  --card-bg: #132238;

  /* Exact font stack from foundation */
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-script: "Pinyon Script", cursive;

  --font-body: var(--font-sans);
  --font-text: var(--font-sans); /* Legacy alias */

  /* Foundation-inspired scales */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --step-5: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);

  --radius: 0.5rem;
  --radius-lg: 1rem;
  --shadow-lux: 0 25px 50px -12px rgb(0 0 0 / 0.4);

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --step-5: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 4px;
  --shadow: 0 12px 40px rgba(11,22,41,0.08);

  --content: 72ch;
  --grid: minmax(0, 72rem);
}

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

html {
  scroll-padding-top: 5rem;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.55;
  color: #E8E4D9;
  background: #0A1428;
  -webkit-font-smoothing: antialiased;
}

/* === ULTRA-LUX MAKEOVER — PRIVATE CLIENT SOVEREIGN FLEET THEME === */
/* Royal Navy #0A1428 fading to black #06101F / #000 + Gold #C9A227 (matched to Private Client Sovereign Fleet live build). All former white space converted. High contrast light text on dark. White logos only. */

.master-brief {
  font-family: var(--font-text);
  font-size: 0.7rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  font-weight: 600;
  opacity: 0.95;
}

.classified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(197,164,110,0.08);
  border: 1px solid rgba(197,164,110,0.3);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
}

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: white;
  padding: 6rem 0;
  overflow: hidden;
}

.hero-copy {
  max-width: 720px;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 600;
  margin: 0.5rem 0 1.25rem;
  color: white;
}

.lede.serif {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  max-width: 560px;
}

.btn-luxury {
  background: linear-gradient(145deg, #C9A227, #A88A52);
  color: #0B1629;
  border: none;
  padding: 15px 36px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 24px rgba(197, 164, 110, 0.35);
  position: relative;
  overflow: hidden;
}

.btn-luxury:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 32px rgba(197, 164, 110, 0.5);
  background: linear-gradient(145deg, #D4B47E, #C9A227);
}

.metallic-gold {
  background: linear-gradient(90deg, #C9A227, #E8D5A3, #C9A227);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gold-shimmer 3.5s linear infinite;
}

@keyframes gold-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.store-link {
  color: #C9A227 !important;
  font-weight: 600;
  letter-spacing: 0.8px;
  position: relative;
  transition: color 0.2s ease;
}

.store-link:hover {
  color: #E8D5A3 !important;
}

.store-link:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, #C9A227, #E8D5A3);
  transition: width 0.3s ease;
}

.store-link:hover:after {
  width: 100%;
}

.trust-line {
  margin-top: 2.5rem;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(197,164,110,0.18);
  padding-top: 1rem;
  max-width: 420px;
}

/* Cinematic Sovereign Sections — Gold Bullion Presentation Standard */
.sovereign-section {
  background: #0B1629;
  color: #EDE7D9;
  padding: 5.5rem 0;
  border-top: 1px solid rgba(197,164,110,0.12);
  position: relative;
}

.sovereign-section .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
}

.sovereign-section h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.sovereign-section .discreet {
  font-size: 0.68rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 0.85rem;
  font-weight: 600;
}

.sovereign-card {
  background: #132238;
  border: 1px solid #2A3F5F;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sovereign-card:hover {
  border-color: #C9A227;
  transform: translateY(-4px);
  box-shadow: 0 28px 55px -14px rgb(0 0 0 / 0.35);
}

.avatar-highlight {
  border: 2px solid #C9A227;
  position: relative;
}

.avatar-highlight::before {
  content: "FLAGSHIP";
  position: absolute;
  top: -10px;
  right: 1.25rem;
  background: #C9A227;
  color: #0B1629;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 2px 11px;
  border-radius: 999px;
}
  padding-top: 1rem;
  max-width: 420px;
}

/* End luxury additions */

h1,h2,h3,h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-3); max-width: var(--content); }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--teal); }

img { max-width: 100%; height: auto; }

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

.skip-link {
  position: absolute; left: -10000px; top: auto;
  background: var(--navy); color: var(--white); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }

/* ── Header ── */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-4);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gray);
}
.site-header.scrolled { background: rgba(255,255,255,0.97); }
.site-header .brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.site-header .brand-text { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); font-weight: 600; }
.site-header .primary { display: flex; gap: var(--space-3); align-items: center; }
.site-header .primary a { text-decoration: none; font-size: 0.95rem; color: var(--navy); }
.site-header .primary a:hover { color: var(--teal); }
.site-header .cta {
  background: var(--navy); color: var(--white) !important;
  padding: 0.6rem 1.1rem; border-radius: var(--radius);
  text-decoration: none;
}
.site-header .cta:hover { background: var(--teal); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; min-height: 44px; min-width: 44px; }
.menu-toggle svg { display: block; }

/* ── Hero ── */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 92vh;
  isolation: isolate;
  color: var(--white);
}
.hero picture, .hero > img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,22,40,0.0) 0%, rgba(10,22,40,0.65) 100%);
}
.hero-copy { padding: var(--space-6) var(--space-4); max-width: 60rem; }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.85rem; color: var(--gold);
  margin-bottom: var(--space-2);
}
.hero h1 { color: var(--white); }
.hero .lede { font-size: var(--step-2); color: var(--gray); max-width: 48rem; }

/* ── Page Hero (subpages) ── */
.page-hero {
  background: var(--navy); color: var(--white);
  padding: var(--space-6) var(--space-4) var(--space-5);
}
.page-hero .container { max-width: 72rem; margin: 0 auto; }
.page-hero .eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.85rem; color: var(--gold);
  margin-bottom: var(--space-2);
}
.page-hero h1 { color: var(--white); }
.page-hero .lede { font-size: var(--step-1); color: var(--gray); max-width: 52rem; }

/* ── Breadcrumb ── */
.breadcrumb {
  padding: var(--space-2) var(--space-4);
  font-size: 0.85rem; color: var(--gray-deep);
  max-width: 80rem; margin: 0 auto;
}
.breadcrumb a { color: var(--gray-deep); }
.breadcrumb span { color: var(--navy); }

/* ── Actions ── */
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.btn {
  display: inline-block; padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  min-height: 44px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--white); color: var(--navy); }
.btn-secondary { background: transparent; color: var(--white); border: 1px solid var(--gray); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }

/* ── Trust Strip ── */
.trust-strip {
  background: var(--navy); color: var(--white);
  padding: var(--space-3) var(--space-4);
}
.trust-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  max-width: 80rem; margin: 0 auto;
}
.trust-strip li { text-align: center; font-size: 0.95rem; }

/* ── Content Sections ── */
.section { padding: var(--space-6) var(--space-4); }
.section .container { max-width: 72rem; margin: 0 auto; }

.services, .standard, .founder, .cta-final {
  padding: var(--space-6) var(--space-4);
  max-width: 80rem; margin: 0 auto;
}

/* ── Cards ── */
.cards {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--space-4);
}
.card {
  border: 1px solid var(--gray);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--white);
}
.card.highlight { border-color: var(--gold); box-shadow: var(--shadow); }
.card h3 { color: var(--navy); }
.card .price { font-family: var(--font-display); font-size: var(--step-1); color: var(--teal); }
.card a { display: inline-block; margin-top: var(--space-2); }

/* ── Standard / Sentinel Section ── */
.standard { background: var(--gray); margin: 0; max-width: none; padding: var(--space-6) var(--space-4); }
.standard .container { max-width: 72rem; margin: 0 auto; }
.standard h2 { color: var(--navy); }
.link-arrow { font-weight: 600; }

/* ── Founder ── */
.founder {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-4); align-items: center;
}
.founder img { width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; background: var(--gray); }

/* ── CTA Final ── */
.cta-final { text-align: center; }

/* ── Content Page ── */
.page-content {
  padding: var(--space-5) var(--space-4);
  max-width: 72rem; margin: 0 auto;
}
.page-content h2 { margin-top: var(--space-5); }
.page-content h3 { margin-top: var(--space-4); }
.page-content ul, .page-content ol { max-width: var(--content); padding-left: 1.5rem; margin: 0 0 var(--space-3); }
.page-content li { margin-bottom: var(--space-1); line-height: 1.6; }

/* ── Service Detail ── */
.service-detail { padding: var(--space-5) var(--space-4); max-width: 72rem; margin: 0 auto; }
.service-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.service-meta-item { padding: var(--space-2); border-left: 3px solid var(--gold); }
.service-meta-item dt { font-size: 0.85rem; color: var(--gray-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.service-meta-item dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); }

/* ── Comparison Table ── */
.compare-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.compare-table th, .compare-table td { padding: var(--space-2); text-align: left; border-bottom: 1px solid var(--gray); }
.compare-table th { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); }
.compare-table thead th { background: var(--navy); color: var(--white); }
.compare-table .check { color: var(--teal); font-weight: 700; }
.compare-table .featured { background: rgba(184,145,42,0.06); }

/* ── Checklist ── */
.checklist { list-style: none; padding: 0; columns: 2; column-gap: var(--space-4); }
.checklist li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; break-inside: avoid; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--gray); padding: var(--space-3) 0; }
.faq-item summary { cursor: pointer; font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); list-style: none; min-height: 44px; display: flex; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; color: var(--gold); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .answer { padding-top: var(--space-2); }

/* ── Process Steps ── */
.process-steps { counter-reset: step; }
.process-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--gray); }
.process-step::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-size: var(--step-3); color: var(--gold); font-weight: 700; min-width: 2.5rem; }

/* ── Map / Service Area ── */
.county-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.county-card { border: 1px solid var(--gray); border-radius: var(--radius); padding: var(--space-3); }
.county-card h3 { color: var(--navy); margin-bottom: var(--space-1); }
.county-card .cities { color: var(--gray-deep); font-size: 0.95rem; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.contact-info dt { font-size: 0.85rem; color: var(--gray-deep); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-2); }
.contact-info dd { margin: 0; font-size: var(--step-1); }
.contact-form label { display: block; font-size: 0.9rem; color: var(--gray-deep); margin-bottom: 0.25rem; margin-top: var(--space-2); }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 0.75rem; border: 1px solid var(--gray);
  border-radius: var(--radius); font-family: var(--font-text); font-size: var(--step-0);
  min-height: 44px;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form button { margin-top: var(--space-3); }

/* ── Footer ── */
.site-footer {
  background: var(--navy); color: var(--gray);
  padding: var(--space-5) var(--space-4) var(--space-3);
}
.site-footer .cols {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 80rem; margin: 0 auto;
}
.site-footer a { color: var(--gray); display: block; padding: 0.25rem 0; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .brand-foot { color: var(--white); font-family: var(--font-display); font-size: var(--step-1); }
.site-footer .col-label { color: var(--white); font-weight: 600; margin-bottom: var(--space-1); }
.site-footer .fineprint { color: var(--gray-deep); font-size: 0.85rem; max-width: 80rem; margin: var(--space-4) auto 0; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .site-header .primary { display: none; }
  .site-header .primary.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--gray); box-shadow: var(--shadow); }
  .menu-toggle { display: block; }
  .founder { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .checklist { columns: 1; }
  .hero-copy { padding: var(--space-4) var(--space-2); }
  .hero h1 { font-size: var(--step-4); }
  .page-hero { padding: var(--space-4) var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================
   3D SPACE + EXECUTIVE LUXURY REDESIGN
   Sans-serif headings (Space Grotesk bold, +5pt vs body)
   Short concise sentences. High-end executive tone.
   Real photos only. Contrast-correct branding.
   ============================================ */

/* Typography: Headings Sans Serif, bold, +5pt */
h1, h2, h3, h4, h5, h6,
.hero h1, .page-hero h1, .lux-section h2 {
  font-family: var(--font-sans) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.25rem; } /* ~ +5-7pt over body */
h2 { font-size: 1.625rem; }
h3 { font-size: 1.375rem; }
p, .lede, body { font-size: 0.9375rem; line-height: 1.55; }

/* Concise executive tone support - tighter spacing */
.lede, p { max-width: 58ch; }
section p + p { margin-top: 0.6rem; }

/* Branding contrast: auto switch logo based on section */
.section-dark .brand img,
.dark-bg .brand img,
.hero .brand img { content: url('/assets/logos/coastal-key-logomark-white.png'); }
.section-light .brand img,
.light-bg .brand img { content: url('/assets/logos/coastal-key-logomark-navy.png'); }

/* 3D Space foundation */
.perspective-container {
  perspective: 1200px;
  perspective-origin: center;
}

.card-3d {
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-3d:hover {
  transform: rotateY(6deg) rotateX(3deg) translateZ(12px);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.45), 0 0 0 1px rgba(197,164,110,0.2);
}

.layered-depth {
  position: relative;
}

.layered-depth > * {
  transition: transform 0.6s ease;
}

.layered-depth .depth-back { transform: translateZ(-40px) scale(0.96); }
.layered-depth .depth-mid { transform: translateZ(0); }
.layered-depth .depth-front { transform: translateZ(30px); }

/* Real photo backgrounds with depth */
.real-photo-bg {
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* subtle parallax feel */
  position: relative;
}

.real-photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,22,41,0.55) 0%, rgba(11,22,41,0.35) 50%, rgba(11,22,41,0.7) 100%);
  z-index: 1;
}

.real-photo-bg .content {
  position: relative;
  z-index: 2;
}

/* High end luxury executive polish */
.executive-tone {
  color: #E8E4D9;
}

.gold-contrast {
  color: #C9A227;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 3D Hero for depth */
.hero-3d {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-layers {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-layers .layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s cubic-bezier(0.23,1,0.32,1);
}

.hero-3d:hover .layer.back { transform: scale(1.04) translateZ(-20px); }
.hero-3d:hover .layer.mid { transform: scale(1.02) translateZ(0); }

/* Clean, organized layout */
.section {
  padding: 5rem 0;
}

.grid-3d {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Short content cards */
.concise-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(197,164,110,0.15);
  padding: 2rem;
  border-radius: 8px;
}

.concise-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
}

.concise-card p {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Video / 3D media container */
.media-3d {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
  transform: translateZ(0);
}

/* Remove wordiness - tighter */
h1 + p, h2 + p { margin-top: 0.4rem; }

/* === HERO AUDIT EXACT STYLES (propagated) === */
.hero {
  font-family: var(--font-sans);
}
.hero .brand-text {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Metallic gold script treatment */
.hero [style*="Pinyon Script"] {
  background: linear-gradient(90deg, #C9A227, #D4AF37, #C9A227);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Medallion 3D bevel + ornate rings */
.hero div[style*="68px; height: 68px"] {
  transition: transform 0.2s ease;
}
.hero div[style*="68px; height: 68px"]:hover {
  transform: scale(1.03);
}

/* Teal classification + scroll */
.hero div[style*="#4ECDC4"] {
  font-weight: 600;
}

/* Emerald system active glow */
.hero div[style*="#00ff9f"] {
  font-weight: 600;
}

/* Global propagation: consistent sans headings +5pt, executive concise, navy/gold/teal */
h1, h2, h3, h4 {
  font-family: var(--font-sans) !important;
  font-weight: 700;
}
h1 { font-size: 2.35rem; }
h2 { font-size: 1.65rem; }

.section-dark, .dark-bg {
  background: #0A1428;
  color: #E8E4D9;
}
.section-light, .light-bg, [style*="background:#fff"], [style*="background: #fff"], [style*="background:#F8F6F0"], [style*="background: #F8F6F0"], [style*="background:#ffffff"], [style*="background: #ffffff"] {
  background: #0A1428 !important;
  color: #E8E4D9 !important;
}

/* Use white logo on dark, navy on light (already in HTML per section) */

/* ═══════════════════════════════════════════════════════════════
   ULTRA-LUXURY MASTERPIECE ADDITIONS — Coastal Key $10K Fortune 500 Grade
   Dark cinematic navy/gold, high contrast digital, conversion-optimized for digital products
   Incorporates research: Stripe/Notion/Linear clarity + Nines luxury proptech visuals + SaaS video demos + sticky/floating players
   ═══════════════════════════════════════════════════════════════ */

/* Luxury Buttons Refined */
.btn-luxury {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(135deg, var(--gold), var(--deep-gold));
  color: var(--navy); font-weight: 700; letter-spacing: 0.02em;
  padding: 1rem 2rem; border-radius: 9999px; text-decoration: none;
  box-shadow: var(--gold-glow);
  transition: var(--transition-lux); border: none; cursor: pointer;
  font-size: 0.95rem;
}
.btn-luxury:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 10px 30px -10px rgba(197,164,110,0.5); }
.btn-luxury:active { transform: scale(0.985); }

/* Cinematic Section with Custom Generated BGs */
.lux-section {
  position: relative; overflow: hidden;
  background: var(--deep-navy);
  color: var(--white);
}
.lux-section .bg-image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.65; filter: contrast(1.1) saturate(0.9);
}
.lux-section .content { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.lux-gold-line { height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 2rem 0; }

/* Digital Products Grid — High Conversion, Selective Quality */
.product-grid {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.product-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; transition: var(--transition-lux); display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-lux); }
.product-card .price { font-family: var(--font-display); font-size: 1.75rem; color: var(--gold); margin: 0.5rem 0; }
.product-card .badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.7rem; padding: 0.2rem 0.6rem; background: var(--gold); color: var(--navy); border-radius: 999px; }
.product-card .cta { margin-top: auto; }

/* Interactive ROI Calculator — High-end conversion tool */
.roi-calc {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem;
  max-width: 640px; margin: 2rem auto;
}
.roi-calc input, .roi-calc select {
  background: var(--deep-navy); color: var(--white); border: 1px solid var(--border);
  padding: 0.6rem 0.8rem; border-radius: 6px; width: 100%; margin-bottom: 0.75rem;
}
.roi-result { font-size: 1.5rem; color: var(--gold); font-weight: 600; margin-top: 1rem; }

/* The Lingering Avatar Video Popup / Floating Player — "lingers with user movements" */
.video-linger {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60;
  width: 280px; background: var(--video-linger-bg); border: 1px solid var(--gold);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lux);
  cursor: pointer; transition: var(--transition-lux);
  backdrop-filter: blur(20px);
}
.video-linger:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6); }
.video-linger .teaser {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
  font-size: 0.85rem; color: var(--gold);
}
.video-linger .teaser img, .video-linger .teaser video { width: 52px; height: 38px; object-fit: cover; border-radius: 4px; }
.video-linger .label { flex: 1; font-weight: 600; letter-spacing: 0.02em; }
.video-linger .close-teaser { background: none; border: none; color: var(--gold); font-size: 1.1rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; }

.video-modal {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(6,16,31,0.92); backdrop-filter: blur(12px);
}
.video-modal[open] { display: flex; }
.video-modal .modal-inner {
  width: min(92vw, 960px); background: var(--modal-bg); border: 1px solid var(--gold);
  border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.7);
}
.video-modal video { width: 100%; display: block; background: #000; }
.video-modal .modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; background: rgba(0,0,0,0.3); color: var(--gold);
}
.video-modal .modal-header button { background: none; border: 1px solid var(--gold); color: var(--gold); padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; }
.video-modal .modal-header button:hover { background: var(--gold); color: var(--navy); }

/* Subtle mouse movement linger effect support (JS adds .tilt) */
.video-linger.tilt { transition: transform 0.1s linear; }

/* Elite Form & Lead Gen (converts to transactions) */
.elite-form {
  background: var(--card-bg); border: 1px solid var(--border); padding: 2rem; border-radius: var(--radius-lg);
}
.elite-form input, .elite-form textarea, .elite-form select {
  width: 100%; background: var(--deep-navy); color: var(--white); border: 1px solid var(--border);
  padding: 0.85rem; border-radius: 8px; margin-bottom: 0.75rem; font-size: 0.95rem;
}
.elite-form button { width: 100%; }

/* High Contrast Digital Features & Micro Polish */
.digital-feature { position: relative; }
.digital-feature::after {
  content: ''; position: absolute; inset: -1px; border: 1px solid rgba(197,164,110,0.15);
  border-radius: inherit; pointer-events: none;
}
.gold-accent-text { color: var(--gold); }
.luxury-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.4; }

/* Performance & Polish */
img, video { max-width: 100%; height: auto; }
.scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-reveal.visible { opacity: 1; transform: none; }

/* Responsive Lux */
@media (max-width: 720px) {
  .video-linger { width: 220px; bottom: 1rem; right: 1rem; }
  .product-grid { grid-template-columns: 1fr; }
}

/* === PRIVATE CLIENT SOVEREIGN FLEET THEME ENFORCEMENT === */
/* Royal navy #0A1428 bg for all former white, gold #C9A227 accents, high contrast #E8E4D9 text, premium cards like the target fleet page */
.premium-card, .product-card, .foundation-card, .purchase-card {
  background: #16203A !important;
  border: 1px solid #C9A227 !important;
  border-radius: 12px;
  color: #E8E4D9;
}
.premium-card h3, .product-card h3 { color: #C9A227; }
.gold, .gold-accent, [style*="color:#C5A46E"], [style*="color: #C5A46E"] { color: #C9A227 !important; }
.gold-bg, .btn-luxury { background: #C9A227 !important; color: #0A1428 !important; }
body, .foundation-body, .section, main, .content { background: #0A1428; color: #E8E4D9; }
a { color: #C9A227; }
a:hover { color: #E8D5A3; }

/* Logo consistency - white only, varied sizes already in HTML */
img[src*="logomark-white.png"] { filter: none; }

