/* Pacific Blueprint: motion layer.
   Everything that moves on its own is scoped to .pb-motion, which is only set
   when the visitor has not asked their system for reduced motion. */

:root {
  --pb-gold: #D39A38;
  --pb-navy: #063B5C;
  --pb-teal: #1F6F8B;
  --pb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }
::selection { background: rgba(211, 154, 56, 0.35); }
/* The decorative wave lines had no fill set, so browsers painted them as grey shapes */
svg path[stroke]:not([fill]) { fill: none; }

/* Hide the page for a moment while motion.js tags elements, so nothing flashes */
.pb-loading body { opacity: 0; }
.pb-motion body { transition: opacity 0.5s ease; }

/* ---------- Scroll progress: a gold thread across the top ---------- */
.pb-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--pb-teal), var(--pb-gold));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ---------- Sticky glass nav ---------- */
.pb-nav {
  position: sticky; top: 0; z-index: 900;
  transition: padding 0.45s var(--pb-ease), margin 0.45s var(--pb-ease),
              background-color 0.45s ease, box-shadow 0.45s ease;
}
.pb-nav > img { transition: height 0.45s var(--pb-ease); }
.pb-nav.is-scrolled {
  padding-top: 12px !important; padding-bottom: 12px !important;
  margin-bottom: var(--pb-nav-delta, 0px);
  background: rgba(247, 245, 240, 0.97) !important; /* near-solid: the logo image has a cream background */
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(6, 59, 92, 0.08), 0 10px 30px -12px rgba(6, 59, 92, 0.18);
}
.pb-nav.is-scrolled > img { height: 56px !important; }
.pb-nav.pb-measure, .pb-nav.pb-measure > img { transition: none !important; }

.pb-nav-links a { position: relative; transition: color 0.3s ease; }
.pb-nav-links a:hover { opacity: 1; color: var(--pb-teal); }
.pb-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--pb-gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--pb-ease);
}
.pb-nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.pb-nav-links a[style*="border-bottom"]::after { display: none; }

/* ---------- Buttons: lift + light sweep ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.4s var(--pb-ease), box-shadow 0.4s var(--pb-ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform 0.8s var(--pb-ease);
}
.btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(6, 59, 92, 0.45); }
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Arrow links nudge their arrow */
a > svg { transition: transform 0.35s var(--pb-ease); }
a:hover > svg { transform: translateX(4px); }

/* ---------- Scroll reveal ---------- */
.pb-motion .pb-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--pb-ease), transform 0.9s var(--pb-ease);
  transition-delay: var(--pb-delay, 0ms);
}
.pb-motion .pb-reveal.pb-reveal-img {
  transform: none; clip-path: inset(12% 0 12% 0 round 10px);
  transition: opacity 1s var(--pb-ease), clip-path 1.3s var(--pb-ease);
  transition-delay: var(--pb-delay, 0ms);
}
.pb-motion .pb-reveal.pb-reveal-script {
  opacity: 1; transform: none; clip-path: inset(-10% 100% -10% 0);
  transition: clip-path 1.6s var(--pb-ease);
  transition-delay: var(--pb-delay, 0ms);
}
.pb-motion .pb-reveal.is-in { opacity: 1; transform: none; clip-path: inset(-10% -10% -10% -10% round 10px); }

/* Headline: words rise out of a mask, last word gets a highlighter swipe */
.pb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.pb-w > span { display: inline-block; }
.pb-motion .pb-w > span {
  transform: translateY(110%);
  transition: transform 1s var(--pb-ease); transition-delay: var(--pb-delay, 0ms);
}
.pb-motion .pb-split.is-in .pb-w > span { transform: none; }
.pb-mark {
  background: linear-gradient(transparent 60%, rgba(211, 154, 56, 0.38) 60%, rgba(211, 154, 56, 0.38) 92%, transparent 92%) no-repeat;
  background-size: 100% 100%;
}
.pb-motion .pb-mark { background-size: 0% 100%; transition: background-size 1.1s var(--pb-ease) 1.1s; }
.pb-motion .pb-split.is-in .pb-mark { background-size: 100% 100%; }

/* SVG lines draw themselves */
.pb-motion .pb-draw path, .pb-motion .pb-draw circle {
  transition: stroke-dashoffset 2.2s var(--pb-ease);
}

/* ---------- Ambient motion ---------- */
@keyframes pb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pb-spin { to { transform: rotate(360deg); } }
@keyframes pb-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
@keyframes pb-drift { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes pb-march { to { background-position: 12px 0; } }
@keyframes pb-marquee { to { transform: translateX(-50%); } }
@keyframes pb-faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.pb-motion .pb-float { animation: pb-float 6s ease-in-out infinite; }
.pb-badge::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1.5px dashed rgba(211, 154, 56, 0.85); pointer-events: none;
}
.pb-motion .pb-badge::before { animation: pb-spin 40s linear infinite; }
.pb-motion .pb-kenburns { animation: pb-kenburns 20s ease-in-out infinite alternate; }
.pb-motion .pb-drift { animation: pb-drift 14s ease-in-out infinite alternate; }
.pb-motion .pb-dash { animation: pb-march 1.4s linear infinite; }

/* ---------- Cards: lift, gentle tilt, cursor glow ---------- */
.pb-card {
  position: relative; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 0.5s var(--pb-ease), box-shadow 0.5s var(--pb-ease);
}
.pb-card:hover { --ty: -6px; box-shadow: 0 26px 44px -22px rgba(6, 59, 92, 0.45); }
.pb-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
.pb-card:hover::after { opacity: 1; }

/* Path stages */
.pb-stage-icon { transition: transform 0.5s var(--pb-ease), box-shadow 0.5s var(--pb-ease); }
.pb-stage:hover .pb-stage-icon { transform: translateY(-5px) scale(1.06); box-shadow: 0 14px 26px -12px rgba(6, 59, 92, 0.4); }

/* "Find your starting point" rows become clickable */
.pb-row { cursor: pointer; transition: background-color 0.3s ease, padding 0.4s var(--pb-ease); }
.pb-row:hover { background: #FBF7EE; padding-left: 38px !important; }
.pb-row > span { transition: transform 0.4s var(--pb-ease), color 0.3s ease; }
.pb-row:hover > span { transform: translateX(-4px); color: #B57F22 !important; }

/* FAQ: smooth open */
.faq summary { transition: color 0.3s ease; }
.faq summary:hover { color: var(--pb-teal) !important; }
.pb-motion .faq details[open] > p { animation: pb-faq-in 0.5s var(--pb-ease); }

/* ---------- Marquee band ---------- */
.pb-marquee {
  overflow: hidden; border-top: 1px solid #E4E1D8; border-bottom: 1px solid #E4E1D8;
  padding: 22px 0; background: #F7F5F0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pb-marquee-track { display: flex; width: max-content; }
.pb-motion .pb-marquee-track { animation: pb-marquee 38s linear infinite; }
.pb-marquee:hover .pb-marquee-track { animation-play-state: paused; }
.pb-marquee-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.pb-marquee-group span {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 26px;
  color: var(--pb-navy); white-space: nowrap;
}
.pb-marquee-group i { font-style: normal; color: var(--pb-gold); font-size: 18px; }