/* Koubit — design fork shared foundation
   Full-bleed nature photography panels + scroll motion, on the existing
   Koubit token system (colors/typography/spacing/fonts token files).
   Each variant page layers its own small stylesheet on top of this. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-on-dark-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------- Header ---------- */

.fk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: var(--space-3);
  background: rgba(12, 43, 64, 0);
  transition: background var(--duration-slow) var(--ease-standard),
              box-shadow var(--duration-slow) var(--ease-standard);
}
.fk-header.scrolled {
  background: rgba(10, 33, 48, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.fk-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.fk-logo { height: 44px; width: auto; }
.fk-nav { display: flex; align-items: center; gap: var(--space-6); }
.fk-nav a {
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  position: relative;
}
.fk-nav a:not(.fbtn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--teal-400);
  transition: width var(--duration-slow) var(--ease-standard);
}
.fk-nav a:not(.fbtn):hover { color: var(--white); }
.fk-nav a:not(.fbtn):hover::after { width: 100%; }

/* ---------- Buttons ---------- */

a.fbtn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-capsule);
  background: var(--brand-primary);
  color: var(--navy-950);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
  text-decoration: none;
  border: var(--border-width) solid var(--brand-primary);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.fbtn:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-teal);
}
/* Modifiers carry the `a` qualifier so they stay above a.fbtn (0,1,1).
   A bare .fbtn--x (0,1,0) silently loses to the base rule. */
a.fbtn--lg { padding: 17px 34px; font-size: var(--text-body-md); }
a.fbtn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
a.fbtn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  box-shadow: none;
}
a:focus-visible, .fbtn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---------- Type helpers ---------- */

.kicker {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: var(--space-4);
}
.display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.display-xl { font-size: clamp(42px, 6vw, 68px); }
.display-lg { font-size: clamp(32px, 4.2vw, 46px); }
.display-md { font-size: clamp(24px, 3vw, 32px); }
.lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-on-dark-secondary);
  text-wrap: pretty;
}
.muted { color: var(--text-on-dark-muted); }

/* ---------- Photo panels ---------- */

.photo-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.photo-panel__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
  transform: scale(1.06);
}
.photo-panel.on .photo-panel__img,
.photo-panel--hero .photo-panel__img {
  animation: fk-kenburns 22s var(--ease-standard) forwards;
}
@keyframes fk-kenburns {
  from { transform: scale(1.12); }
  to   { transform: scale(1.02); }
}
/* Scrims: navy grade over every photo, in three strengths */
.photo-panel__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.scrim--deep {
  background: linear-gradient(to right,
    rgba(10, 33, 48, 0.92) 0%,
    rgba(12, 43, 64, 0.72) 55%,
    rgba(12, 43, 64, 0.42) 100%);
}
.scrim--veil {
  background: linear-gradient(to bottom,
    rgba(10, 33, 48, 0.62) 0%,
    rgba(10, 33, 48, 0.38) 50%,
    rgba(10, 33, 48, 0.66) 100%);
}
.scrim--floor {
  background: linear-gradient(to top,
    rgba(10, 33, 48, 0.94) 0%,
    rgba(12, 43, 64, 0.6) 55%,
    rgba(12, 43, 64, 0.35) 100%);
}
/* Teal mist along a panel's bottom edge — the brand grade */
.photo-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 188, 194, 0.16), transparent);
  pointer-events: none;
}

/* ---------- Grain ---------- */

.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}
.grain > *:not(.photo-panel__img):not(.photo-panel__scrim) { position: relative; z-index: 3; }

/* ---------- Scroll reveal ---------- */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}
.rv.on { opacity: 1; transform: none; }
.rv-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.rv-stagger.on > * { opacity: 1; transform: none; }
.rv-stagger.on > :nth-child(1) { transition-delay: 0ms; }
.rv-stagger.on > :nth-child(2) { transition-delay: 90ms; }
.rv-stagger.on > :nth-child(3) { transition-delay: 180ms; }
.rv-stagger.on > :nth-child(4) { transition-delay: 270ms; }
.rv-stagger.on > :nth-child(5) { transition-delay: 360ms; }
.rv-stagger.on > :nth-child(6) { transition-delay: 450ms; }

/* Hero load-in: soft blur lift, like an exhale */
@keyframes fk-hero-reveal {
  from { opacity: 0; transform: translateY(46px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hload {
  opacity: 0;
  animation: fk-hero-reveal 1.1s var(--ease-standard) forwards;
}
.hload-2 { animation-delay: 0.25s; }
.hload-3 { animation-delay: 0.5s; }
.hload-4 { animation-delay: 0.75s; }

/* ---------- Cards ---------- */

.fcard {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-standard), border-color 0.3s var(--ease-standard);
}
.fcard::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--brand-primary);
  transition: width 0.4s var(--ease-standard);
}
.fcard:hover { transform: translateY(-4px); border-color: rgba(10, 188, 194, 0.4); }
.fcard:hover::before { width: 100%; }
.fcard__icon {
  width: 44px; height: 44px;
  color: var(--teal-400);
  margin-bottom: var(--space-4);
}
.fcard__icon svg { width: 100%; height: 100%; }
.fcard__title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.fcard__body {
  color: var(--text-on-dark-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* ---------- Scroll progress + indicator ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--brand-primary);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 60;
}
@keyframes fk-drift {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
.scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  animation: fk-drift 2.4s var(--ease-standard) infinite;
  color: rgba(255, 255, 255, 0.75);
  font-size: 22px;
  text-decoration: none;
  z-index: 4;
}

/* ---------- Sections ---------- */

.fk-section { padding-block: var(--space-10); }
.band--deep { background: var(--bg-section-alt); }
.band--slate { background: var(--bg-section-alt-2); }

/* ---------- Footer ---------- */

.fk-footer {
  padding-block: var(--space-7);
  background: var(--navy-950);
  color: var(--text-on-dark-muted);
  font-size: var(--text-body-sm);
}
.fk-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}
.fk-footer a { color: var(--text-on-dark-secondary); text-decoration: none; }
.fk-footer a:hover { color: var(--teal-400); }

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .fk-nav a:not(.fbtn) { display: none; }
  .fk-section { padding-block: var(--space-9); }
}
@media (max-width: 560px) {
  .fk-nav .fbtn { padding: 10px 18px; font-size: var(--text-caption); white-space: nowrap; }
  .fk-logo { height: 36px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-stagger > * { opacity: 1; transform: none; transition: none; }
  .hload { animation: none; opacity: 1; }
  .photo-panel__img, .photo-panel.on .photo-panel__img,
  .photo-panel--hero .photo-panel__img { animation: none; transform: none; }
  .scroll-cue { animation: none; }
}