/* ============================================================
   Prefontaine.design — Layout & Sections
   ============================================================ */

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--off-white);
  transform: translate(-50%, -50%);
  /* dark halo so the light dot stays visible on light backgrounds too */
  box-shadow: 0 0 0 1.5px rgba(8,12,14,0.6);
}
.cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.5);
  /* dark companion edges → visible on light backgrounds without mix-blend-mode */
  box-shadow: 0 0 0 1px rgba(8,12,14,0.35), inset 0 0 0 1px rgba(8,12,14,0.35);
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-settle), height 0.4s var(--ease-settle),
              border-color 0.4s var(--ease-settle), background 0.4s var(--ease-settle);
}
.cursor-ring.is-hover {
  width: 56px; height: 56px;
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
}
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  transition: background 0.5s var(--ease-settle), padding 0.5s var(--ease-settle),
              border-color 0.5s var(--ease-settle);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,12,14,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,0.08);
  padding: 18px 40px;
}
.nav__logo {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--off-white);
}
.nav__logo .dot { color: var(--gold); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav__links a:not(.btn) {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  padding: 4px 0;
  transition: color 0.4s var(--ease-settle);
}
.nav__links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-settle);
}
.nav__links a:not(.btn):hover { color: var(--off-white); }
.nav__links a:not(.btn):hover::after { width: 100%; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 26px; height: 1.5px;
  background: var(--off-white);
  transition: transform 0.4s var(--ease-settle), opacity 0.3s;
}

/* mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--teal-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
  gap: 8px;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-settle);
  visibility: hidden;
}
.nav-overlay.open { transform: translateX(0); visibility: visible; }
.nav-overlay a {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--off-white);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-settle), transform 0.6s var(--ease-settle);
}
.nav-overlay.open a { opacity: 1; transform: translateY(0); }
.nav-overlay a:nth-child(1) { transition-delay: 0.08s; }
.nav-overlay a:nth-child(2) { transition-delay: 0.16s; }
.nav-overlay a:nth-child(3) { transition-delay: 0.24s; }
.nav-overlay a:nth-child(4) { transition-delay: 0.32s; }
.nav-overlay a:hover { color: var(--gold); }

@media (max-width: 860px) {
  .nav { padding: 20px 24px; }
  .nav.scrolled { padding: 14px 24px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0 32px;
}
.hero__ambient {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(13,92,74,0.5), transparent 70%),
    radial-gradient(closest-side at 70% 55%, rgba(27,58,107,0.45), transparent 70%),
    radial-gradient(closest-side at 50% 70%, rgba(15,76,92,0.5), transparent 70%);
  filter: blur(40px);
  opacity: 0.5;
  animation: ambientDrift 20s ease-in-out infinite;
}
@keyframes ambientDrift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.15) translate(4%, -3%); }
  66% { transform: scale(1.05) translate(-3%, 4%); }
}
.hero__inner { position: relative; z-index: 1; max-width: 1000px; }
.hero h1 {
  font-size: clamp(52px, 8vw, 100px);
  margin-bottom: 32px;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero h1 .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-settle);
}
.hero.loaded h1 .word { transform: translateY(0); }
.hero__sub {
  max-width: 600px;
  margin: 0 auto 44px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-settle) 0.6s, transform 1s var(--ease-settle) 0.6s;
}
.hero.loaded .hero__sub { opacity: 1; transform: translateY(0); }
.hero__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-settle) 0.78s, transform 1s var(--ease-settle) 0.78s;
}
.hero.loaded .hero__ctas { opacity: 1; transform: translateY(0); }

.scroll-cue {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.6s var(--ease-settle) 1.2s;
}
.hero.loaded .scroll-cue { opacity: 1; }
.scroll-cue__line {
  position: relative;
  width: 1px; height: 54px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  top: -50%; left: 0;
  width: 1px; height: 50%;
  background: var(--gold);
  animation: scrollDrop 2.2s var(--ease-settle) infinite;
}
@keyframes scrollDrop {
  0% { top: -50%; } 100% { top: 100%; }
}
.scroll-cue span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ---------- Reveal on scroll (generic) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur-reveal) var(--ease-settle),
              transform var(--dur-reveal) var(--ease-settle);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* line-clip heading reveal */
.clip-head .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.clip-head .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-settle);
}
.clip-head.in .line > span { transform: translateY(0); }
.clip-head.in .line:nth-child(2) > span { transition-delay: 0.09s; }

/* ============================================================
   Section 3 — Services
   ============================================================ */
.services { background: var(--teal-deep); }
.services__head { max-width: 760px; margin-bottom: 72px; }
.services__head h2 { font-size: clamp(34px, 4.5vw, 56px); }
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.svc-card {
  padding: 48px 44px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.svc-card__mark { margin-bottom: 36px; }
.svc-card h3 { font-size: 30px; margin-bottom: 18px; }
.svc-card p { color: var(--silver); margin-bottom: 32px; }
.svc-card__list {
  list-style: none;
  margin: auto 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.svc-card__list li {
  font-size: 13px;
  color: var(--off-white);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-card__list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--emerald-bright);
}
.services__note {
  text-align: center;
  margin-top: 48px;
  color: var(--silver);
  font-size: 16px;
}
.services__note a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }

/* ============================================================
   Section 4 — Selected Work
   ============================================================ */
.work__head { margin-bottom: 64px; }
.work__head h2 { font-size: clamp(34px, 4.5vw, 56px); max-width: 720px; }
.work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  cursor: pointer;
  isolation: isolate;
}
.tile--large {
  grid-column: 1 / -1;
  min-height: 60vh;
}
.tile__bg { position: absolute; inset: 0; z-index: -1; transition: transform 1.2s var(--ease-settle); }
.tile:hover .tile__bg { transform: scale(1.04); }
.tile--kiefy .tile__bg { background: var(--kiefy-bg); }
.tile--bridget { color: var(--teal-deep); }
.tile--bridget .tile__bg { background: var(--bridget-bg); }
.tile--prefontaine .tile__bg { background: var(--prefontaine-bg); }

.tile__tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 12px;
}
.tile--kiefy .tile__tag { color: var(--emerald-bright); }
.tile--prefontaine .tile__tag { color: var(--sapphire-mid); }
.tile h3 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 14px; }
.tile__desc { font-size: 16px; max-width: 480px; opacity: 0.85; }
.tile--large .tile__desc { font-size: 18px; }

.tile__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(8,12,14,0.92), transparent);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s var(--ease-settle), opacity 0.6s var(--ease-settle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tile:hover .tile__overlay { transform: translateY(0); opacity: 1; }
.tile__overlay .view {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}

/* Persistent CTA shown only on mobile, where the hover overlay is disabled. */
.tile__view {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
}
/* Bridget brand accent — single source of truth (was inline + a separate hex) */
.tile--bridget { --bridget-accent: #b08544; }
.tile--bridget .tile__tag,
.tile--bridget .tile__view { color: var(--bridget-accent); }
.tile--bridget .tile__overlay > span:first-child { color: var(--off-white); }

/* decorative dashboard bars inside Kiefy tile */
.kiefy-bars {
  position: absolute;
  top: 40px; right: 40px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  opacity: 0.6;
  transition: opacity 0.6s var(--ease-settle);
}
.tile--kiefy:hover .kiefy-bars { opacity: 1; }
.kiefy-bars i {
  display: block;
  width: 12px;
  background: linear-gradient(to top, rgba(16,185,129,0.3), var(--emerald-bright));
  border-radius: 3px 3px 0 0;
  transform: scaleY(0.4);
  transform-origin: bottom;
  transition: transform 0.8s var(--ease-settle);
}
.tile--kiefy:hover .kiefy-bars i { transform: scaleY(1); }
.kiefy-bars i:nth-child(1) { height: 50%; transition-delay: 0s; }
.kiefy-bars i:nth-child(2) { height: 80%; transition-delay: 0.06s; }
.kiefy-bars i:nth-child(3) { height: 40%; transition-delay: 0.12s; }
.kiefy-bars i:nth-child(4) { height: 95%; transition-delay: 0.18s; }
.kiefy-bars i:nth-child(5) { height: 65%; transition-delay: 0.24s; }

/* ============================================================
   Section 5 — Process
   ============================================================ */
.process { background: var(--sapphire); background: linear-gradient(180deg, #0c1f3d 0%, #0a1830 100%); }
.process__head { margin-bottom: 80px; }
.process__head h2 { font-size: clamp(34px, 4.5vw, 56px); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pstep { position: relative; }
.pstep__num {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.8;
  color: rgba(255,255,255,0.05);
  margin-bottom: 16px;
}
.pstep h3 { font-size: 24px; margin-bottom: 12px; }
.pstep p { font-size: 15px; color: var(--silver); }

/* ============================================================
   Section 7 — Contact CTA
   ============================================================ */
.cta-section {
  background: var(--ruby-deep);
  background: radial-gradient(closest-side at 50% 40%, rgba(123,28,46,0.55), var(--ruby-deep) 80%);
}
.cta-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 72px 56px;
  border-radius: 24px;
}
.cta-card h2 { font-size: clamp(34px, 4.5vw, 56px); margin-bottom: 20px; }
.cta-card p { color: var(--silver); margin-bottom: 40px; font-size: 18px; }
.cta-card__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Footer
   ============================================================ */
.footer { padding: 72px 0 40px; }
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer__links { display: flex; gap: 28px; }
.footer__links a {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  transition: color 0.3s;
}
.footer__links a:hover { color: var(--gold); }
.footer__rule {
  height: 1px;
  background: rgba(201,168,76,0.2);
  margin: 36px 0;
}
.footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--silver);
  font-size: 13px;
}
.footer__social { display: flex; gap: 18px; }
.footer__social a { color: var(--silver); transition: color 0.3s; }
.footer__social a:hover { color: var(--gold); }
.footer__tag {
  text-align: center;
  margin-top: 36px;
  font-size: 12px;
  color: rgba(148,163,184,0.5);
  letter-spacing: 0.04em;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .services__grid, .work__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  /* Mobile/touch has no hover: hide the slide-up overlay and show a static
     CTA instead (prevents the overlay overlapping the base content). */
  .tile, .tile--large { min-height: 320px; }
  .tile__overlay { display: none; }
  .tile__view { display: inline-flex; }
}
@media (max-width: 560px) {
  .process__grid { grid-template-columns: 1fr; }
  .pstep__num { font-size: 88px; }
  .cta-card { padding: 48px 28px; }
}