/* =========================================================
   START OF MAEZKEV — VANILLA REBUILD
   Design tokens lifted from the original Elementor kit
   ========================================================= */

:root {
/* Surfaces are tinted cool so they sit inside the navy/plum section gradients
   rather than on top of them. Each step up is ~1.2:1 so nesting reads. */
  --c-bg:        #0B0D12;
  --c-surface:   #12151C;
  --c-surface-2: #212630;

/* Text. --c-muted carries body copy, so it clears 4.5:1 on every surface. */
  --c-white:     #FEFEFE;
  --c-muted:     #828D9F;
  --c-line:      #4E5668;

/* Two accents: blue leads, green supports. */
  --c-blue:      #0D8BD1;
  --c-green:     #47CF73;

/* Radial gradient cores, one per section. */
  --c-navy:      #20283F;
  --c-plum:      #220C32;

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 84px;
  --wrap: 1140px;
  --tl-floor: 8px;   /* clearance below the timeline markers */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);   /* gentle ease-out for the button fill */
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

/* When the eased scroller is driving, hand it the scroll offset outright —
   native smooth behaviour would animate every frame it requests. */
html.has-smooth-scroll { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: hidden would make body a scroll container and
     break the pinned timeline's position: sticky. */
  overflow-x: clip;
}

/* ---------------------------------------------------------
   START OF SCROLLBAR — BLUE HANDLE ON NOTHING
   --------------------------------------------------------- */
html {
  scrollbar-color: var(--c-blue) transparent;   /* Firefox: thumb, track */
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-blue);
  border-radius: 99px;
  /* A transparent border clipped to the content box insets the handle, so it
     reads as a floating pill rather than filling the gutter edge to edge. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #1CA2EC; background-clip: content-box; }

/* ---------------------------------------------------------
   END OF SCROLLBAR — BLUE HANDLE ON NOTHING
   --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-blue);
  color: var(--c-white);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   START OF BUTTONS
   --------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;          /* clips the water to the pill */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 24px 10px;
  border: 1px solid var(--c-navy);
  border-radius: 360px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* The label flips as the water passes it, so it never sits half-legible in a
     blend of the outgoing and incoming colours. */
  transition: color .25s var(--ease) .28s, border-color .5s var(--ease-soft);
}

/* Water fill: an oversized panel with a domed top, parked below the button and
   rising on hover. The dome reads as a meniscus while it climbs, and the rise
   overshoots so the curve clears the top and the button ends up fully filled.
   The wobble animates border-radius only, so it never fights the transform. */
.btn::before {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -60%;
  width: 140%;
  height: 160%;
  z-index: 0;
  border-radius: 46% 48% 0 0 / 26% 24% 0 0;
  transform: translateY(100%);
  transition: transform .7s var(--ease-soft);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(-18%);
  animation: waterWobble 3.4s ease-in-out infinite;
}
@keyframes waterWobble {
  0%, 100% { border-radius: 46% 48% 0 0 / 26% 24% 0 0; }
  50%      { border-radius: 49% 44% 0 0 / 21% 29% 0 0; }
}

.btn > * { position: relative; z-index: 1; }   /* label and icon ride above */
.btn__icon { display: flex; }

/* Primary: green fill, water drains it back to an outline.
   Secondary: blue water fills the outline. */
.btn--primary { background: var(--c-green); color: var(--c-bg); }
.btn--primary::before { background: var(--c-bg); }
.btn--primary:hover, .btn--primary:focus-visible {
  color: var(--c-green);
  border-color: var(--c-green);
}

.btn--secondary { background: transparent; color: var(--c-blue); }
.btn--secondary::before { background: var(--c-blue); }
.btn--secondary:hover, .btn--secondary:focus-visible {
  color: var(--c-bg);
  border-color: var(--c-blue);
}

/* ---------------------------------------------------------
   END OF BUTTONS
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF HEADER
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
}

/* Progressive blur: four backdrop-filter layers of rising radius, each masked
   to end sooner than the one below it. Where they overlap the blur compounds,
   so it is heaviest at the top and tapers to nothing past the bar. */
.nav-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + 66px);
  pointer-events: none;
}
.nav-blur span {
  position: absolute;
  inset: 0;
  display: block;
}
.nav-blur span:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.nav-blur span:nth-child(2) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 75%);
}
.nav-blur span:nth-child(3) {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
}
.nav-blur span:nth-child(4) {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 28%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 28%);
}

.header-inner {
  position: relative;   /* above the blur layers */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand img { width: 3rem; height: 3rem; }


.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--c-white);
  transition: transform .3s var(--ease), opacity .2s linear;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: relative;   /* above the blur layers */
  z-index: 1;
  border-top: 1px solid var(--c-line);
  padding: 24px 20px 32px;
  background: var(--c-bg);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__actions { display: grid; gap: 12px; justify-items: start; }

/* ---------------------------------------------------------
   END OF HEADER
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF HERO
   --------------------------------------------------------- */
.hero {
  position: relative;        /* anchors the scroll cue */
  overflow: hidden;          /* clips the parallax layers as they lag */
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  /* The header is sticky, so it holds 84px of flow above this section. Pull the
     hero back up under it and pad the content down instead — otherwise the top
     of the page is a band of body background rather than the gradient. */
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 40px) 20px 60px;
}

/* Particle field. pointer-events stay off — the pointer is tracked on the
   section itself, so the canvas never intercepts a click. */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Positioned children paint above the canvas without needing a negative index. */
.hero__left, .hero__right { position: relative; z-index: 1; }

.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex: 0 0 30%;
  padding-right: 32px;
}

.hero__kicker {
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-white);
}

.hero__status { display: flex; align-items: center; gap: 12px; }

/* Availability dot — solid core with a halo that swells and fades out. The
   halo starts at opacity 0 so it stays invisible under reduced motion. */
.status-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-green);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-green);
  opacity: 0;
  animation: statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(4);   opacity: 0; }
  100% { transform: scale(4);   opacity: 0; }
}

.hero__status-text { font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--c-white); }
.hero__status-text a { transition: color .3s var(--ease); }
.hero__status-text a:hover { color: var(--c-green); }

.hero__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1 1 70%;
}

.hero__name {
  overflow: hidden;          /* the mask the line rises out of */
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
}
.hero__name > span { display: block; }

/* Staged entrance. Pure CSS, so it needs no trigger class and cannot leave the
   hero blank if the script fails. `backwards` rather than `both`: it holds the
   from-state through the delay but releases the element once it lands, leaving
   transform and opacity free for the scroll parallax to drive. */
@media (prefers-reduced-motion: no-preference) {
  .hero__name > span    { animation: heroLine .9s var(--ease-soft) backwards; }
  .hero__name:nth-of-type(1) > span { animation-delay: .10s; }
  .hero__name:nth-of-type(2) > span { animation-delay: .20s; }
  .hero__name:nth-of-type(3) > span { animation-delay: .30s; }

  .hero .rotator        { animation: heroRise .8s var(--ease-soft) .48s backwards; }
  .hero__actions        { animation: heroRise .8s var(--ease-soft) .60s backwards; }
  .hero__left           { animation: heroRise .8s var(--ease-soft) .70s backwards; }
  .hero__cue            { animation: heroCue  .8s var(--ease-soft) .95s backwards; }
}

@keyframes heroLine { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scroll cue — a rail with a light travelling down it. */
.hero__cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color .3s var(--ease);
}
.hero__cue:hover, .hero__cue:focus-visible { color: var(--c-blue); }
.hero__cue-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: var(--c-line);
}
.hero__cue-line i {
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: var(--c-blue);
  animation: cueTravel 2.1s var(--ease) infinite;
}
@keyframes cueTravel {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(222%); }
}
@keyframes heroCue {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.rotator {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4em;
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 8px;
}
.rotator__prefix { color: var(--c-white); }

.rotator__slot {
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  padding: 0 10px 0 0;
  color: var(--c-blue);
  vertical-align: bottom;
}
.rotator__inner {
  display: block;
  transition: transform .6s var(--ease);
}
.rotator__inner b {
  display: block;
  height: 1.4em;
  line-height: 1.4em;
  font-weight: 600;
}

.hero__actions { margin-top: 24px; }

/* ---------------------------------------------------------
   END OF HERO
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF SECTIONS
   --------------------------------------------------------- */
.section { padding: 90px 0; }
/* A label, not a control — it deliberately shares no styling with .btn, so it
   has no hover, no focus ring and nothing to click. */
.section__tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 48px;
  padding: 12px 24px 10px;
  border: 2px solid var(--c-navy);
  border-radius: 360px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-white);
}
.section__tag svg { flex: none; }

.section--journey {
  background: radial-gradient(at center right, var(--c-plum) 0%, var(--c-bg) 35%);
}
.section--statement {
  background: radial-gradient(at center center, var(--c-navy) 0%, var(--c-bg) 55%);
}
.section--projects {
  background: radial-gradient(at center center, var(--c-navy) 0%, var(--c-bg) 65%);
}

/* ---------------------------------------------------------
   END OF SECTIONS
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF TIMELINE — PINNED HORIZONTAL SCRUB

   .journey-scroll is a tall spacer whose height JS sets to
   100vh + the horizontal travel distance. While it passes
   through the viewport the sticky child stays put and the
   track slides sideways; once the travel is used up the
   page carries on scrolling normally.
   --------------------------------------------------------- */
.section--journey { padding: 0; }

.journey-scroll { position: relative; }

/* Base / no-JS / reduced-motion: an ordinary swipeable rail. */
.journey-sticky {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 90px;
}

/* Enhanced: JS measured the travel distance and pinned the section. */
.is-pinned .journey-sticky {
  position: sticky;
  top: 0;
  justify-content: center;
  gap: 40px;
  height: 100vh;
  padding-block: calc(var(--header-h) + 24px) 48px;
  overflow: hidden;
}

.journey-head { flex: none; }
.journey-head .section__tag { margin-bottom: 0; }

/* Track ------------------------------------------------- */
.timeline-h {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.timeline-h::-webkit-scrollbar { display: none; }

/* Height comes from the tallest card rather than the viewport, so the
   block can be centred instead of stranding empty space above it. */
.is-pinned .timeline-h {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  scroll-snap-type: none;
}

/* Progressive edge blur — the navbar's technique turned on its side. Three
   layers of rising radius per edge, each masked to end sooner than the one
   below, so cards soften as they approach the edge rather than being cut off
   sharply. Only while pinned: unpinned the container is a real scroller, and
   absolutely positioned children would scroll away with the content. */
.timeline-h__fade {
  position: absolute;
  top: 0;
  /* Stops at the underside of the cards. The track carries a transform, so it
     is its own stacking context and the rail, stems and markers inside it can
     never paint above this layer on z-index alone — the only way to keep the
     progress bar sharp is to end the blur before it. Mirrors the entry stack:
     marker (45px) + the card's bottom margin (28px) + the track's floor. */
  bottom: calc(45px + 28px + var(--tl-floor));
  z-index: 1;
  /* Reaches the content start line — the same gutter as .container — with a
     floor so narrower desktops still get a readable ramp. */
  width: max(120px, calc(max(0px, (100% - var(--wrap)) / 2) + 20px));
  pointer-events: none;
  display: none;
}
.is-pinned .timeline-h__fade { display: block; }
.timeline-h__fade--left  { left: 0; }
.timeline-h__fade--right { right: 0; }
.timeline-h__fade > span {
  position: absolute;
  inset: 0;
  display: block;
}

.timeline-h__fade--left > span:nth-child(1),
.timeline-h__fade--right > span:nth-child(1) {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.timeline-h__fade--left > span:nth-child(2),
.timeline-h__fade--right > span:nth-child(2) {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.timeline-h__fade--left > span:nth-child(3),
.timeline-h__fade--right > span:nth-child(3) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.timeline-h__fade--left > span:nth-child(1) {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 65%);
  mask-image: linear-gradient(to left, transparent 0%, #000 65%);
}
.timeline-h__fade--left > span:nth-child(2) {
  -webkit-mask-image: linear-gradient(to left, transparent 30%, #000 80%);
  mask-image: linear-gradient(to left, transparent 30%, #000 80%);
}
.timeline-h__fade--left > span:nth-child(3) {
  -webkit-mask-image: linear-gradient(to left, transparent 58%, #000 96%);
  mask-image: linear-gradient(to left, transparent 58%, #000 96%);
}

.timeline-h__fade--right > span:nth-child(1) {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 65%);
  mask-image: linear-gradient(to right, transparent 0%, #000 65%);
}
.timeline-h__fade--right > span:nth-child(2) {
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 80%);
  mask-image: linear-gradient(to right, transparent 30%, #000 80%);
}
.timeline-h__fade--right > span:nth-child(3) {
  -webkit-mask-image: linear-gradient(to right, transparent 58%, #000 96%);
  mask-image: linear-gradient(to right, transparent 58%, #000 96%);
}

.timeline-h__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 72px;
  width: max-content;
  /* Same gutter as .container, so the first card lines up with the section tag.
     A percentage resolves against the containing block; 100vw would include the
     scrollbar and land ~7px out. */
  padding-inline: calc(max(0px, (100% - var(--wrap)) / 2) + 20px);
  /* Clearance under the markers. Without it they sit flush against the
     overflow edge and the active state's scale(1.1) gets clipped. */
  padding-bottom: var(--tl-floor);
  will-change: transform;
}
/* The tail matches the gutter too, so travel ends with the last card on the
   container's right edge rather than leaving a long empty run of rail. */
.is-pinned .timeline-h__track {
  padding-right: calc(max(0px, (100% - var(--wrap)) / 2) + 20px);
}

/* The rail runs along the bottom of the track, level with the icon row.
   `bottom` is measured from the padding box, so the floor has to be added
   back in to keep the line through the middle of the markers. */
.timeline-h__rail {
  position: absolute;
  bottom: calc(45px / 2 + var(--tl-floor));
  left: 0;
  right: 0;
  z-index: 2;              /* above the cards it runs behind */
  height: 4px;
  transform: translateY(50%);
  background: var(--c-surface);
}
.timeline-h__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--c-blue);
}

/* Entry — date, card, then the marker sitting on the rail. Content is
   bottom-aligned so every card meets its stem at the same height. */
.tl-entry {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: end;
  justify-items: center;
  width: 420px;
  flex: none;
}

.tl-label { grid-row: 1; margin-bottom: 14px; }
.tl-card  { grid-row: 2; margin-bottom: 28px; }
.tl-icon  { grid-row: 3; }

/* the vertical stem joining a card down to the rail */
.tl-entry::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 45px;
  width: 2px;
  height: 28px;
  z-index: 2;              /* stays with the rail, not the card */
  background: var(--c-surface);
  transform: translateX(-50%);
  transition: background-color .2s linear;
}
.tl-entry.is-active::before { background: var(--c-blue); }

.tl-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  text-align: left;
  padding: 5px 0;
}
.tl-label__main { color: var(--c-blue); font-weight: 500; }
.tl-label__sub  { color: var(--c-muted); font-size: 14px; }

.tl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-white);
  transition: color .2s linear, border-color .2s linear,
              background-color .2s linear, transform .3s var(--ease);
  z-index: 3;              /* above the rail it sits on */
}
.tl-entry.is-active .tl-icon {
  color: var(--c-blue);
  border-color: var(--c-blue);
  background: var(--c-surface);
  transform: scale(1.1);
}

.tl-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, .1);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
/* Cards ahead of the playhead sit back until the scrub reaches them. */
.is-pinned .tl-entry:not(.is-active) .tl-card {
  opacity: .45;
  transform: translateY(8px);
}

.tl-card__media { flex: 0 0 44px; }
.tl-card__media img { width: 100%; height: auto; object-fit: contain; }
.tl-card__body { text-align: left; min-width: 0; }
.tl-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 6px;
}
.tl-card__desc { font-size: 1rem; font-weight: 400; color: var(--c-muted); }

/* ---------------------------------------------------------
   END OF TIMELINE — PINNED HORIZONTAL SCRUB
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF STATEMENT
   --------------------------------------------------------- */
.statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 24px;
  border-radius: 16px;
  background: rgba(18, 21, 28, .78);
}
.statement__line { max-width: 100%; }
.statement__line:last-child { align-self: flex-end; }

.statement__line b {
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 600;
  text-transform: capitalize;
  color: var(--c-white);
}

.clip {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.clip b { display: block; }
.is-visible .clip b { animation: clipIn 1s var(--ease) both; }
@keyframes clipIn {
  from { clip-path: inset(0 100% 0 0); transform: translateY(.15em); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}
.statement__line:last-child .clip b { animation-delay: .35s; }

/* ---------------------------------------------------------
   END OF STATEMENT
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF PROJECTS
   --------------------------------------------------------- */
.projects { display: grid; gap: 90px; }
.project-block { display: block; }

.feature-card {
  display: flex;
  gap: 0;
  border-radius: 24px;
  background: var(--c-surface);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.feature-card__media { flex: 0 0 62%; }
.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.feature-card__aside {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
}

.quote-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-surface-2);
}
.quote-box__mark { color: var(--c-line); }
.quote-box p {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.35;
}

.meta-row { display: flex; gap: 16px; }
.meta-box {
  flex: 1;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-surface-2);
}
.meta-box__title { font-size: 1.5rem; font-weight: 600; color: var(--c-white); line-height: 1.2; }
.meta-box__sub   { font-size: 1rem;   font-weight: 400; color: var(--c-white); }

/* Image accordion */
.accordion {
  display: flex;
  gap: 8px;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
}
.accordion__item {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  transition: flex .6s var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.accordion__item.is-active { flex: 3; }

.accordion__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: rgba(11, 13, 18, .72);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.accordion__item.is-active .accordion__overlay { opacity: 1; }

.accordion__title { font-size: 2rem; font-weight: 600; color: var(--c-white); }
.accordion__desc  { max-width: 460px; font-size: 1rem; color: var(--c-white); }
.accordion__btn {
  margin-top: 8px;
  padding: 10px 24px;
  border: 1px solid var(--c-white);
  border-radius: 360px;
  font-size: 1rem;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.accordion__btn:hover { background: var(--c-white); color: var(--c-bg); }

/* ---------------------------------------------------------
   END OF PROJECTS
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF FOOTER + UTILITIES
   --------------------------------------------------------- */
.site-footer {
  padding: 40px 0;
  background: var(--c-bg);
  text-align: center;
  font-size: 14px;
  color: var(--c-muted);
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-navy);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-blue); border-color: var(--c-blue); }

/* Scroll reveal.

   An animation rather than a transition, and with no fill mode. A transition
   here would replace whatever `transition` the element already declares — the
   feature card's hover lift, the accordion's flex easing — and a fill mode
   would pin `transform` afterwards, outranking those same hovers. Without one,
   the element hands control straight back once it has landed. */
.reveal { opacity: 0; }
.reveal.is-visible {
  opacity: 1;
  animation: revealUp .8s var(--ease-soft) var(--reveal-delay, 0s);
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* Custom cursor */
#cursor, #follower {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s linear;
}
#cursor {
  width: 8px;
  height: 8px;
  background: var(--c-blue);
}
#follower {
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-blue);
  transition: opacity .3s linear, width .25s var(--ease), height .25s var(--ease),
              background-color .25s var(--ease);
}
body.has-cursor #cursor, body.has-cursor #follower { opacity: 1; }

/* Over something interactive the ring takes over on its own: the dot drops
   out and a faint wash of the accent fills the circle in its place. The
   circle keeps its size — only the fill marks the change. */
body.has-cursor #cursor.is-hover { opacity: 0; }
#follower.is-hover { background: rgba(13, 139, 209, .18); }

/* Pressing is the one thing that resizes the ring. */
#follower.is-down { width: 26px; height: 26px; }
#follower.is-hover.is-down { background: rgba(13, 139, 209, .28); }

/* The custom cursor replaces the native one outright. `has-cursor` is only
   set once the pointer has actually moved, so the arrow is never hidden
   before its stand-in exists. */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor,
  body.has-cursor * { cursor: none; }
}

/* ---------------------------------------------------------
   END OF FOOTER + UTILITIES
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF CONTEXT MENU
   --------------------------------------------------------- */
.ctx-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--c-navy);
  border-radius: 14px;
  background: rgba(18, 21, 28, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  transform-origin: top left;
  animation: ctxIn .14s var(--ease) both;
}
.ctx-menu[hidden] { display: none; }

@keyframes ctxIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.ctx-menu__group[hidden] { display: none; }
/* `:not([hidden])` matters: `+` matches on DOM order, so without it the link
   group still draws a separator above the next group while it is display:none,
   leaving a stray line across the top of the menu. */
.ctx-menu__group:not([hidden]) + .ctx-menu__group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--c-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ctx-menu__item:hover,
.ctx-menu__item:focus-visible {
  background: var(--c-navy);
  color: var(--c-blue);
  outline: none;
}
.ctx-menu__item svg { flex: none; opacity: .6; }
.ctx-menu__item:hover svg,
.ctx-menu__item:focus-visible svg { opacity: 1; }
.ctx-menu__item.is-done { color: var(--c-green); }
.ctx-menu__item.is-done svg { opacity: 1; }

.ctx-menu__ext { margin-left: auto; font-size: 12px; opacity: .5; }

/* ---------------------------------------------------------
   END OF CONTEXT MENU
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   START OF RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .feature-card { flex-direction: column; }
  .feature-card__media { flex: none; }
  .feature-card__media img { height: auto; }
}

@media (max-width: 880px) {
  :root { --header-h: 68px; }

  .header-inner > .btn { display: none; }
  .nav-toggle { display: flex; }

  .hero {
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding-top: calc(var(--header-h) + 24px);
  }
  .hero__left {
    order: 2;
    align-items: flex-start;
    flex: none;
    padding-right: 0;
  }
  .hero__right { order: 1; flex: none; }
  .hero__name { font-size: 28px; line-height: 1.1; }
  .hero__status-text { font-size: 5vw; }
  .rotator { font-size: 18px; }
  .hero__actions { display: none; }
  .hero__cue { display: none; }

  .section { padding: 64px 0; }

  /* Timeline: never pinned here — swipe the rail sideways instead.
     The row layout is unchanged; entries stretch to the tallest card so
     every marker still lands on the rail. */
  .journey-sticky { gap: 24px; padding-block: 64px; }
  .timeline-h { scroll-snap-type: x mandatory; }
  .timeline-h__track { gap: 24px; }
  .tl-entry { width: min(300px, 78vw); scroll-snap-align: center; }

  .tl-card { flex-direction: column; align-items: center; text-align: center; }
  .tl-card__media { flex: none; width: 50px; }
  .tl-card__body { text-align: center; }
  .tl-card__title { font-size: 1.1rem; }
  .tl-card__desc { font-size: 14px; }

  .statement { align-items: center; }
  .statement__line:last-child { align-self: center; }

  .meta-row { flex-direction: column; }

  .accordion { flex-direction: column; height: auto; }
  .accordion__item { flex: none; min-height: 260px; }
  .accordion__item.is-active { flex: none; }
  .accordion__overlay { opacity: 1; position: static; background: rgba(11, 13, 18, .6); }
  .accordion__item .accordion__overlay { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   END OF RESPONSIVE
   --------------------------------------------------------- */

/* =========================================================
   END OF MAEZKEV — VANILLA REBUILD
   ========================================================= */