/* =========================================================================
   FinCore Partner — design tokens, base, and shared components
   ========================================================================= */

/* ---- Self-hosted fonts (variable weight axis, latin subset only) ---- */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-variable.woff2') format('woff2-variations'),
       url('/assets/fonts/jost-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-variable.woff2') format('woff2-variations'),
       url('/assets/fonts/lora-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-italic-variable.woff2') format('woff2-variations'),
       url('/assets/fonts/lora-italic-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Color: brand */
  --navy: #0B2443;
  --navy-deep: #0A1B2D;
  --footer-navy: #0F2137;
  --gold: #B7893A;        /* decorative only: rules, dots, borders, icon fills, gold text ON navy */
  --gold-deep: #8C692C;   /* text-safe gold: headline accents + running text on cream (AA 4.6:1) */
  --gold-tint: #F0E7D6;
  --cream: #F8F5F0;
  --card: #FFFFFF;
  --body-ink: #5A6572;
  --body-ink-soft: #7C8592;
  --line: #E9E2D6;

  /* Color: semantic */
  --bg-page: var(--cream);
  --bg-card: var(--card);
  --text-heading: var(--navy);
  --text-body: var(--body-ink);

  /* Type */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing scale (8px base) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Layout */
  --container-w: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2rem);
  --header-h: 96px;
  --header-h-condensed: 72px;

  /* Radii + shadow */
  --radius-card: 20px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 44px -26px rgba(11, 36, 67, .22);
  --shadow-card-hover: 0 30px 60px -22px rgba(11, 36, 67, .28);
  --shadow-header: 0 8px 30px -18px rgba(11, 36, 67, .25);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;

  /* Entrance motion. Separate from the tokens above: those are tuned for
     hover/UI feedback and are far too short for a page entrance. --ease-draw
     is gentler than --ease-out, whose aggressive tail would make a drawing
     line lurch forward then crawl to the finish. */
  --dur-entrance: 900ms;
  --dur-draw: 1200ms;
  --ease-draw: cubic-bezier(.45, .05, .3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* Visible keyboard focus everywhere — never suppressed */
:focus-visible {
  outline: 2.5px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: .75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---- Typography ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
  font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  color: var(--text-heading);
}
.h1 .accent {
  color: var(--gold-deep);
}
/* Mask wrapper for the hero headline's line-by-line rise.
   .h1's line-height is 1.12 — tight enough that overflow:hidden clips
   descenders (the "p" in "Multiple"). Pad the clipping box out and pull the
   layout back with a matching negative margin, so nothing clips and the
   surrounding spacing is unchanged. */
.h1-line {
  display: block;
  overflow: hidden;
  padding-block: .08em;
  margin-block: -.08em;
}
.h1-line__inner { display: block; }
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.18;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  color: var(--text-heading);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  font-size: 1.3rem;
  color: var(--text-heading);
}
.lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--body-ink);
  line-height: 1.75;
}
.rule-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: var(--sp-6) 0;
}
.rule-dot::before,
.rule-dot::after {
  content: '';
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.rule-dot::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.rule-dot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.rule-under {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin-top: .85em;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--sp-24);
}
.section--flush-top { padding-top: 0; }
@media (max-width: 720px) {
  .section { padding-block: var(--sp-16); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.9em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 14px 30px -12px rgba(183, 137, 58, .55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(183, 137, 58, .65); }
.btn-outline {
  border: 1.5px solid rgba(247, 243, 236, .4);
  color: var(--cream);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(183, 139, 66, .12); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--gold-deep);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.arrow-link svg { width: 17px; height: 17px; }
a:hover .arrow-link,
.arrow-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
  transform: translateX(3px);
}

/* ---- Decorative motifs ---- */
.dot-grid {
  position: absolute;
  width: 190px;
  height: 190px;
  background-image: radial-gradient(var(--gold) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .35;
  pointer-events: none;
}
.trend-arc {
  position: absolute;
  pointer-events: none;
  opacity: .55;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-header.is-condensed {
  height: var(--header-h-condensed);
  background: rgba(248, 245, 240, .92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-header);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.brand img { height: 40px; width: auto; transition: height var(--dur-med) var(--ease-out); }
.site-header.is-condensed .brand img { height: 34px; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.main-nav a {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: var(--navy);
  padding-block: .4rem;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] {
  color: var(--gold-deep);
  font-weight: 600;
}
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 110;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform var(--dur-med) var(--ease-out);
    z-index: 105;
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav ul {
    flex-direction: column;
    gap: var(--sp-8);
  }
  .main-nav a { font-size: 1.4rem; }
  body.nav-open { overflow: hidden; }
}

/* ---- Footer (ported from FinCore Footer.html) ---- */
.site-footer {
  position: relative;
  background: var(--footer-navy);
  color: #F7F3EC;
  overflow: hidden;
}
.site-footer .dot-grid { top: 0; right: 0; opacity: .18; }
.footer-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--sp-16) var(--container-pad) var(--sp-10);
  position: relative;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}
.footer-brand { flex: 1.4 1 260px; min-width: 220px; }
.footer-brand .brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.footer-brand .brand-mark .accent { color: var(--gold); }
.footer-brand .brand-tag {
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-top: 2px;
}
.footer-brand p {
  margin-top: var(--sp-4);
  font-size: .875rem;
  line-height: 1.7;
  color: #C7CDD6;
  max-width: 260px;
}
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 236, .25);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { border-color: var(--gold); background: rgba(183, 139, 66, .12); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col { flex: 1 1 150px; min-width: 150px; }
.footer-col.contact { flex: 1.2 1 220px; min-width: 220px; }
.footer-col-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: .75rem; }
.footer-col a, .footer-col li {
  font-size: .9rem;
  color: #C7CDD6;
  line-height: 1.55;
}
.footer-col a { transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--gold); }
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(183, 139, 66, .5), rgba(183, 139, 66, .06));
  margin: var(--sp-10) 0 var(--sp-6);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: .8rem;
  color: #8D96A3;
}
.footer-bottom a:hover { color: var(--gold); }

@media (max-width: 720px) {
  .footer-col { flex-basis: 45%; }
}
@media (max-width: 440px) {
  .footer-col { flex-basis: 100%; }
}

/* ---- Reveal on scroll ----
   Hidden state only applies once .js confirms script executed (set
   synchronously in <head>), so content stays visible by default if JS
   fails to load — it never depends on JS to become visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 240ms; }

/* =========================================================================
   Entrance choreography (page load)

   Every rule here uses animation-fill-mode: backwards, so an element's
   resting state is "visible and in place" and the animation only reaches
   back to hide it during its own delay window. If animations never run,
   nothing is left hidden — content never depends on animation to appear.

   prefers-reduced-motion is already neutralized globally near the top of
   this file, so none of these need a separate guard.

   Home timeline:
     0.00s  arcs draw upward (staggered 150ms)
     0.20s  eyebrow
     0.35s  "One Partner."
     0.50s  "Multiple Business Solutions."
     0.65s  rule-dot
     0.75s  sub-headline
   ========================================================================= */

@keyframes hero-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-mask-rise {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes hero-expand {
  from { opacity: 0; transform: scaleX(.3); }
  to   { opacity: 1; transform: none; }
}

/* Arcs. Paths carry pathLength="1" (set in index.php), so dasharray:1 covers
   the whole path and dashoffset 1 -> 0 draws it. Resting state (offset 0)
   renders identically to no dash at all. Targets the child <path> elements,
   while site.js's cursor parallax transforms the parent <svg> — different
   elements, different properties, so the two compose instead of fighting. */
.hero-arc path {
  stroke-dasharray: 1;
  animation: hero-draw var(--dur-draw) var(--ease-draw) backwards;
}
.hero-arc path:nth-child(2) { animation-delay: 150ms; }
.hero-arc path:nth-child(3) { animation-delay: 300ms; }

.hero-content .eyebrow {
  animation: hero-rise var(--dur-entrance) var(--ease-out) 200ms backwards;
}
.hero-content .h1-line__inner {
  animation: hero-mask-rise var(--dur-entrance) var(--ease-out) backwards;
}
.hero-content .h1-line:nth-of-type(1) .h1-line__inner { animation-delay: 350ms; }
.hero-content .h1-line:nth-of-type(2) .h1-line__inner { animation-delay: 500ms; }
.hero-content .rule-dot {
  animation: hero-expand var(--dur-entrance) var(--ease-out) 650ms backwards;
}
.hero-content .lede {
  animation: hero-rise var(--dur-entrance) var(--ease-out) 750ms backwards;
}

/* Inner pages (About / Services / Contact): a shorter, quieter echo so
   arriving from Home doesn't feel flat. Most of these heroes are
   .eyebrow -> .h2 -> .lede, but thank-you.php and 404.php add a 4th child
   (.credentials-cta, the CTA button) — covered explicitly below so it
   doesn't default to 0ms and jump the queue ahead of the headline. */
.page-hero-content > * {
  animation: hero-rise var(--dur-entrance) var(--ease-out) backwards;
}
.page-hero-content > *:nth-child(1) { animation-delay: 80ms; }
.page-hero-content > *:nth-child(2) { animation-delay: 200ms; }
.page-hero-content > *:nth-child(3) { animation-delay: 320ms; }
.page-hero-content > *:nth-child(4) { animation-delay: 440ms; }

/* =========================================================================
   Home page
   ========================================================================= */

.hero {
  position: relative;
  padding-block: var(--sp-24) var(--sp-20);
  overflow: hidden;
}
.hero .dot-grid.dot-grid--tr { top: 4%; right: 2%; }
.hero .dot-grid.dot-grid--ml { top: 55%; left: -2%; opacity: .25; }
.hero-arc {
  position: absolute;
  top: -10%;
  right: -6%;
  width: min(58vw, 780px);
  opacity: .5;
  pointer-events: none;
}
.hero-content {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.hero .h1 { margin-top: var(--sp-2); }
.hero .lede { max-width: 520px; margin-inline: auto; }

.pillars {
  position: relative;
  padding-block: 0 var(--sp-20);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.pillar-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.pillar-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gold-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  transition: transform var(--dur-med) var(--ease-out);
}
.pillar-card:hover .pillar-icon {
  transform: scale(1.08) rotate(-4deg);
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar-card h3 { margin-bottom: var(--sp-2); }
.pillar-card p {
  font-size: .9rem;
  color: var(--body-ink);
  line-height: 1.65;
  min-height: 3.3em;
}
.pillar-card .arrow-link { margin-top: var(--sp-5); }

@media (max-width: 1020px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .hero-arc { width: 90vw; opacity: .35; }
}

/* Curved divider from cream into the closing navy zone.
   The gold stroke along its top edge continues the logo's ascending-line motif. */
.section-divider {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* fuse with the navy zone below, no seam */
}

/* Closing navy zone: curve + credentials strip + CTA, flowing straight into
   the footer (--navy-deep -> --footer-navy are near-identical) so nothing
   below the fold reads as a separate, bolted-on band. */
.closing {
  position: relative;
  background: var(--navy-deep);
  color: #EDEBE4;
  padding-block: var(--sp-4) var(--sp-20);
  overflow: hidden;
}
.closing .dot-grid { top: 8%; right: 4%; opacity: .16; }
.credentials {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.closing .eyebrow { color: var(--gold); }
.closing .eyebrow::before, .closing .eyebrow::after { background: var(--gold); }
.closing .h2 { color: #F7F3EC; }
.credentials-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-8);
}
.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em 1.2em;
  border: 1px solid rgba(183, 139, 66, .4);
  border-radius: var(--radius-pill);
  font-size: .82rem;
  letter-spacing: .06em;
  color: #D8DEE7;
}
.credential-badge strong { color: var(--gold); font-weight: 600; }
.credentials-cta { margin-top: var(--sp-8); }
.credentials p.lede { color: #C7CDD6; }

/* =========================================================================
   Shared inner-page hero (Services / About / Contact)
   ========================================================================= */
.page-hero {
  position: relative;
  padding-block: var(--sp-20) var(--sp-16);
  text-align: center;
  overflow: hidden;
}
.page-hero .dot-grid.dot-grid--tr { top: 6%; right: 3%; }
.page-hero-content {
  position: relative;
  max-width: 700px;
  margin-inline: auto;
}
.page-hero .lede { max-width: 560px; margin-inline: auto; margin-top: var(--sp-4); }
.page-hero .h2 .accent { color: var(--gold-deep); }
.page-hero--tall { padding-block: var(--sp-32) var(--sp-24); }

/* =========================================================================
   Services page
   ========================================================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.service-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--gold);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.service-card--featured {
  background: var(--gold-tint);
  border-top-color: var(--gold-deep);
}
.service-card__number {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--gold);
  opacity: .7;
}
.service-card__ribbon {
  position: absolute;
  top: -13px;
  left: var(--sp-6);
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4em 1em;
  border-radius: var(--radius-pill);
}
.service-icon {
  width: 68px;
  height: 68px;
  margin-bottom: var(--sp-5);
}
.service-icon img { width: 100%; height: 100%; }
.service-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-1); }
.service-card .summary {
  font-size: .88rem;
  color: var(--body-ink);
  line-height: 1.65;
  flex: 1;
}
.service-card__more {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.service-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.service-card__toggle::-webkit-details-marker { display: none; }
.service-card__toggle .chevron {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.service-card__more[open] .chevron { transform: rotate(180deg); }
.service-card__full {
  margin-top: var(--sp-3);
  font-size: .85rem;
  line-height: 1.7;
  color: var(--body-ink);
}

@media (max-width: 1020px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   About page
   ========================================================================= */
.narrative {
  max-width: 700px;
  margin-inline: auto;
}
.narrative p {
  margin-bottom: var(--sp-6);
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--body-ink);
}
.narrative p.lede-para {
  font-size: 1.15rem;
  color: var(--text-heading);
  line-height: 1.75;
}
.narrative strong {
  color: var(--gold-deep);
  font-weight: 600;
}
.pull-quote {
  position: relative;
  margin: var(--sp-10) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-8);
  border-left: 3px solid var(--gold);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  text-align: left;
}
.vm-card {
  background: rgba(247, 243, 236, .04);
  border: 1px solid rgba(183, 139, 66, .28);
  border-radius: var(--radius-card);
  padding: var(--sp-8);
}
.vm-card .vm-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.vm-card h3 {
  color: #F7F3EC;
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.vm-card p {
  font-size: .92rem;
  line-height: 1.75;
  color: #C7CDD6;
}

@media (max-width: 720px) {
  .vm-grid { grid-template-columns: 1fr; }
  .pull-quote { padding-left: var(--sp-5); }
}

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--sp-10);
  align-items: start;
}
.contact-info-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.contact-info-list {
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.contact-info-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-info-item .icon-dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-item .icon-dot svg { width: 18px; height: 18px; color: var(--gold-deep); }
.contact-info-item h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .3em;
}
.contact-info-item p, .contact-info-item a {
  font-size: .92rem;
  color: var(--body-ink);
  line-height: 1.6;
}
.contact-info-item a:hover { color: var(--gold-deep); }
.contact-map {
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 0;
  display: block;
  filter: grayscale(15%);
}
.contact-social {
  display: flex;
  gap: var(--sp-3);
  padding: 0 var(--sp-6) var(--sp-8);
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.contact-social a:hover { border-color: var(--gold); background: var(--gold-tint); }
.contact-social svg { width: 16px; height: 16px; }

.contact-form-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);
}
.form-errors {
  background: #FBEAEA;
  border: 1px solid #E3B4B4;
  color: #8A2E2E;
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: .88rem;
}
.form-errors p { font-weight: 600; margin-bottom: .3em; }
.form-errors ul { list-style: disc; padding-left: 1.2em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4em;
}
.field .optional { font-weight: 400; color: var(--body-ink-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--text-body);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-deep);
  outline: none;
}
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea {
  border-color: #C0453D;
}
.field .field-error {
  display: block;
  margin-top: .4em;
  font-size: .8rem;
  color: #B33A32;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form-card .btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: var(--sp-6); }
}