/* ============ tokens ============ */
:root {
  --cream:        #f7f0db;     /* page bg */
  --cream-deep:   #ede1c0;
  --butter:       #f4cf63;     /* lemon yellow */
  --butter-soft:  #f6e5a0;
  --pool:         #2b7a9b;     /* water blue */
  --pool-deep:    #103e54;
  --olive:        #6f7a3f;
  --ink:          #15191c;     /* near-black for text on cream */
  --ink-soft:     #4a4842;
  --line:         #d8c89a;
  --rule:         rgba(16, 62, 84, 0.18);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--pool-deep);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ============ full-page ambient video background ============ */
.ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
#root {
  position: relative;
  z-index: 1;
}
a { color: inherit; text-decoration: none; }

::selection { background: var(--butter); color: var(--pool-deep); }

/* ============ shared text ============ */

.script-title {
  font-family: "Pinyon Script", "Allura", "Snell Roundhand", cursive;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--pool-deep);
  margin: 0 0 28px;
  text-wrap: balance;
}
.script-title em {
  font-style: italic;
  color: var(--butter);
  text-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.lede {
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 20px;
}
.lede.right { text-align: right; margin-left: auto; }

p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 18px;
}
p em { font-style: italic; color: var(--ink); }
p.kicker {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 1.6vw, 24px);
  font-style: italic;
  color: var(--pool-deep);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 28px;
}

/* ============ section-label ============ */

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pool);
  margin-bottom: 32px;
}
.section-label .num { font-weight: 600; }
.section-label .dash { width: 40px; height: 1px; background: currentColor; opacity: 0.6; }
.section-label .ttl { font-weight: 500; }

/* ============ nav ============ */

.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 56px);
  /* extend the bar's height so the blur layers have room to fade past the
     content before disappearing — keeps the fade gradual and seamless */
  padding-bottom: 28px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
  isolation: isolate;
}
/* Frosted glass — strongest blur at the top, tapering to clear at the bottom.
   Five stacked layers, each with a smooth multi-stop mask, so the transition
   from blur → clear has no visible seam. */
.topnav::before,
.topnav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.topnav::before {
  /* strong blur, fades out by ~60% — bumped intensity for crisper text area */
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,0.6) 40%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,0.6) 40%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0) 70%);
}
.topnav::after {
  /* light blur + tint, fades all the way to clear at the bottom edge */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  background: linear-gradient(180deg,
    rgba(16, 62, 84, 0.32) 0%,
    rgba(16, 62, 84, 0.22) 35%,
    rgba(16, 62, 84, 0.10) 65%,
    rgba(16, 62, 84, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.7) 55%,
    rgba(0,0,0,0.3) 80%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.7) 55%,
    rgba(0,0,0,0.3) 80%,
    rgba(0,0,0,0) 100%);
}
.topnav.hidden { transform: translateY(calc(-100% - 20px)); }

.topnav .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 6px 0 4px;
  position: relative;
}
.topnav .brand::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244, 207, 99, 0.45), transparent);
}
.brand-script {
  font-family: "Pinyon Script", cursive;
  font-size: 30px;
  line-height: 1;
  color: var(--cream);
  margin-right: 1px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 18px rgba(244, 207, 99, 0.20);
}
.brand-dot {
  color: var(--butter);
  font-weight: 700;
  font-size: 14px;
  align-self: center;
  margin: 0 2px;
}
.brand-tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--butter-soft);
  font-weight: 500;
}

.topnav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0 16px;
}
.topnav ul button {
  position: relative;
  background: none;
  border: 0;
  padding: 9px 14px;
  cursor: pointer;
  font: 10px/1 "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247, 240, 219, 0.55);
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.topnav ul button:hover {
  color: var(--cream);
  background: transparent;
  text-shadow: 0 0 10px rgba(247, 240, 219, 0.45);
}
.topnav ul button.on {
  color: var(--butter);
  background: transparent;
  text-shadow:
    0 0 8px rgba(244, 207, 99, 0.85),
    0 0 16px rgba(244, 207, 99, 0.55),
    0 0 28px rgba(244, 207, 99, 0.30);
}
.topnav ul button.on::before { content: none; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  border: 1px solid rgba(244, 207, 99, 0.55);
  border-radius: 999px;
  font: 10px/1 "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--butter);
  background: rgba(244, 207, 99, 0.06);
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.cta::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 10px rgba(244, 207, 99, 0.8);
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.55); opacity: 0.55; }
}
.cta:hover {
  background: var(--butter);
  color: var(--pool-deep);
  border-color: var(--butter);
  box-shadow: 0 10px 28px -10px rgba(244, 207, 99, 0.55);
  transform: translateY(-1px);
}
.cta:hover::after {
  background: var(--pool-deep);
  box-shadow: none;
  animation: none;
}

@media (max-width: 880px) {
  .topnav {
    top: 0; left: 0; right: 0;
    grid-template-columns: auto auto;
    padding: 10px 16px;
  }
  .topnav ul { display: none; }
  .topnav .brand::after { display: none; }
}

/* ============ section frame ============ */

main > div { scroll-margin-top: 0; }
section {
  position: relative;
  padding: 140px 64px;
  max-width: 1440px;
  margin: 0 auto;
}
/* Full-width sections — backgrounds go edge-to-edge */
.about,
.skillset,
.video-wall,
.services,
.contact {
  max-width: none;
  width: 100%;
}
@media (max-width: 720px) {
  section { padding: 96px 24px; }
}

/* ============ 01 cover ============ */

.cover {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--pool-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  background: transparent;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.cover-poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* soft dim — lighter than the about/contact veil so the footage stays bright */
.cover-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 90% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.22) 100%),
    linear-gradient(180deg,
      rgba(10, 36, 50, 0.18) 0%,
      rgba(10, 36, 50, 0.10) 30%,
      rgba(10, 36, 50, 0.10) 70%,
      rgba(10, 36, 50, 0.28) 100%);
}

.cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: clamp(40px, 6vh, 80px) clamp(32px, 6vw, 96px);
  pointer-events: none;
  text-align: center;
}
.cover-name {
  align-self: start;
  margin-top: clamp(36px, 7vh, 80px);
  transform: translateX(18%);
  font-family: "Glacial Indifference", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 44px);
  letter-spacing: 0.02em;
  color: var(--butter);
  text-shadow: 0 1px 18px rgba(0,0,0,0.35);
}
.cover-stack {
  position: relative;
  display: block;
  text-align: center;
  line-height: 0.9;
  /* shift the whole pair (UGC + Portfolio) leftward without changing
     their relationship to each other */
  transform: translateX(-8%);
}
.cover-ugc {
  position: absolute;
  /* nestled above "Portfolio", in the gap between the P and the f */
  bottom: 66%;
  left: 61%;
  transform: translateX(-50%);
  font-family: "Hammersmith One", "Cormorant Garamond", "Georgia", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 90px);
  color: var(--butter);
  letter-spacing: -0.06em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  line-height: 1;
  margin: 0;
  z-index: 2;
  white-space: nowrap;
}
.cover-portfolio {
  display: block;
  text-align: center;
  font-family: "Ballet", "Pinyon Script", "Allura", "Snell Roundhand", cursive;
  font-weight: 400;
  font-size: clamp(160px, 24vw, 380px);
  color: var(--butter);
  letter-spacing: 0;
  text-shadow: 0 2px 28px rgba(0,0,0,0.4);
  line-height: 1;
  margin: 0 auto;
}
.cover-meta {
  align-self: end;
  margin-bottom: clamp(60px, 11vh, 140px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Glacial Indifference", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 24px);
  letter-spacing: 0.04em;
  color: var(--butter);
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}
.cover-meta-l { text-align: left; }
.cover-meta-r { text-align: right; }

@media (max-width: 720px) {
  .cover-meta { font-size: 13px; }
  .cover-name { font-size: 18px; }
}
.cover-scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--butter-soft);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.cover-scroll-cue .line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--butter-soft), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ============ 02 about ============ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.4fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}

.about-portrait .portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  background: var(--cream-deep);
  border: 3px solid rgba(244, 207, 99, 0.65);
  box-shadow:
    0 0 20px 5px rgba(244, 207, 99, 0.28),
    0 0 55px 12px rgba(244, 207, 99, 0.12),
    0 30px 80px -40px rgba(16, 62, 84, 0.5);
}
.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-meta {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}
.meta-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.meta-row span:first-child { color: var(--pool); }
.meta-row span:last-child  { color: var(--ink); font-weight: 500; }

/* old about-stats — replaced by standalone stats-strip section */

/* ============ placeholder fill ============ */

.ph-stripes {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(244, 207, 99, 0.06) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, rgba(16, 62, 84, 0.80), rgba(10, 40, 55, 0.95));
}
.ph-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font: 10px/1.4 "JetBrains Mono", "SF Mono", monospace;
  letter-spacing: 0.12em;
  color: rgba(247, 240, 219, 0.35);
  text-transform: uppercase;
  opacity: 0.7;
}
.ph-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  color: rgba(244, 207, 99, 0.25);
  opacity: 0.4;
}

/* ============ 03 skillset ============ */

.skill-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 720px) {
  .skill-head { grid-template-columns: 1fr; gap: 24px; }
  .skill-head .lede.right { text-align: left; margin-left: 0; }
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: rgba(255, 252, 240, 0.6);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
  opacity: 0;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--pool);
  box-shadow: 0 24px 50px -30px rgba(16, 62, 84, 0.4);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tool-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tool-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--pool-deep);
  line-height: 1.1;
}
.tool-sub {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============ 04-06 video walls ============ */

.video-wall {
  background: var(--pool-deep);
  position: relative;
  overflow: hidden;
}
/* video wall content above the fixed caustic canvas */
.video-wall > * {
  position: relative;
  z-index: 1;
}
.wall-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 880px) {
  .wall-grid { grid-template-columns: 1fr; gap: 36px; max-width: 360px; margin: 0 auto; }
}

.vtile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vtile-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0; /* sharp corners on all work tiles (photo + video) */
  overflow: hidden;
  background: var(--pool-deep);
  /* Soft butter-yellow glow on every tile */
  box-shadow:
    0 0 0 1px rgba(244, 207, 99, 0.18),
    0 0 24px -4px rgba(244, 207, 99, 0.28),
    0 0 56px -8px rgba(244, 207, 99, 0.18),
    0 30px 60px -40px rgba(16, 62, 84, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
}
.vtile-frame:hover {
  transform: translateY(-6px);
  /* Glow intensifies on hover */
  box-shadow:
    0 0 0 1px rgba(244, 207, 99, 0.32),
    0 0 36px -4px rgba(244, 207, 99, 0.45),
    0 0 80px -8px rgba(244, 207, 99, 0.28),
    0 40px 80px -40px rgba(16, 62, 84, 0.75);
}
.vtile-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vtile-placeholder { position: absolute; inset: 0; }

.vtile-foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.vtile-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--butter);
}
.vtile-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pool-deep);
}

/* walls: solid pool-deep background (caustic shader removed) */
#wall1, #wall2, #wall3, #wall4 {
  background: var(--pool-deep);
}
/* Remove vertical gaps between wall sections for continuous gallery */
#wall1 .video-wall,
#wall2 .video-wall,
#wall3 .video-wall,
#wall4 .video-wall,
#photos .video-wall {
  padding-top: 56px;
  padding-bottom: 56px;
}
/* The photo section is the LAST work section, so the .seam-outof gradient
   (margin-top: -200px, z-index: 2) overlaps back into its bottom and covers
   the lower portion of the photos. Add 200px of extra bottom padding so
   the photo tiles clear the overlap zone. */
#photos .video-wall { padding-bottom: 256px; }
#wall1 .video-wall { padding-top: 52px; }  /* "my work" sits just below where the gradient resolves to solid */
/* Subtle gold rule separator between consecutive walls */
#wall2 .video-wall::after,
#wall3 .video-wall::after,
#wall4 .video-wall::after,
#photos .video-wall::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 207, 99, 0.25) 20%, rgba(244, 207, 99, 0.25) 80%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* ============ 07 services ============ */

.services {
  padding-top: 160px;
  padding-bottom: 160px;
}
.services-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 720px) { .services-head { grid-template-columns: 1fr; gap: 24px; } }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  padding: 36px 32px 40px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.3s;
}
.service-card:hover { background: rgba(244, 207, 99, 0.12); }
.service-card:hover .service-num { color: var(--butter); }
.service-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--pool);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  transition: color 0.3s;
}
.service-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pool-deep);
  margin: 0 0 10px;
}
.service-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ============ 08 contact ============ */

.contact {
  position: relative;
  isolation: isolate;
  /* semi-transparent so ambient video shows through gently */
  background:
    radial-gradient(ellipse 80% 60% at 80% -10%, rgba(244, 207, 99, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 80% at -10% 110%, rgba(43, 122, 155, 0.40), transparent 70%),
    linear-gradient(180deg, rgba(12, 49, 68, 0.85) 0%, rgba(10, 46, 63, 0.80) 60%, rgba(8, 40, 58, 0.85) 100%);
  color: var(--cream);
  max-width: none;
  width: 100%;
  padding: 140px 64px 56px;
  overflow: hidden;
}
/* film-grain veil + thin gold rule across the top */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.contact::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 207, 99, 0.4) 20%, rgba(244, 207, 99, 0.4) 80%, transparent);
  pointer-events: none;
  z-index: 1;
}
.contact > * { position: relative; z-index: 2; }

.contact .section-label { color: var(--butter-soft); margin-bottom: 0; }
.contact .section-label .ttl { color: var(--butter-soft); }
.contact-inner { max-width: 1280px; margin: 0 auto; }

.contact-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid rgba(246, 229, 160, 0.18);
  flex-wrap: wrap;
}
.contact-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(244, 207, 99, 0.45);
  border-radius: 999px;
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--butter-soft);
  background: rgba(244, 207, 99, 0.04);
}
.contact-stamp .stamp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 4px rgba(244, 207, 99, 0.18);
  animation: stampPulse 2.6s ease-in-out infinite;
}
@keyframes stampPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244, 207, 99, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(244, 207, 99, 0.04); }
}

.contact-title {
  color: var(--cream);
  font-size: clamp(64px, 10.5vw, 168px);
  line-height: 0.92;
  margin-bottom: 44px;
  letter-spacing: -0.01em;
}
.contact-title em { color: var(--butter); font-style: italic; }

.contact-lede {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: rgba(247, 240, 219, 0.75);
  max-width: 56ch;
  margin: 0 0 88px;
}

.contact-rows {
  border-top: 1px solid rgba(246, 229, 160, 0.22);
  margin-bottom: 96px;
}
.contact-row {
  display: grid;
  grid-template-columns: 56px 160px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 24px;
  border-bottom: 1px solid rgba(246, 229, 160, 0.22);
  cursor: pointer;
  position: relative;
  transition: padding-left 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;
}
/* Light frosted glass — restored, but rendered as a layer that stops
   short of the arrow column so the glass tint never sits inside the
   open arrow circle (or behind it). */
.contact-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: 104px; /* clear the 48px arrow + 24px padding + buffer */
  background: linear-gradient(160deg, rgba(255, 252, 244, 0.08) 0%, rgba(255, 252, 244, 0.04) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(95%);
          backdrop-filter: blur(22px) saturate(95%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  /* Soft fade on both sides so the band dissolves into the section
     instead of ending on a hard line — and gives a smooth gap before
     the arrow. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Lift all row content above the glass layer. */
.contact-row > * { position: relative; z-index: 1; }
.contact-row::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--butter), transparent);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 2;
}
.contact-row:hover { padding-left: 44px; }
.contact-row:hover::before { width: 100%; }

.cr-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--butter);
  opacity: 0.7;
}
.cr-label {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--butter-soft);
}
.cr-value {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: color 0.3s;
}
.contact-row:hover .cr-value { color: var(--butter); }

.cr-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(244, 207, 99, 0.35);
  border-radius: 50%;
  color: var(--butter);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s, border-color 0.3s;
}
.contact-row:hover .cr-arrow {
  transform: translate(4px, -4px) rotate(0deg);
  background: rgba(244, 207, 99, 0.12);
  border-color: var(--butter);
}
@media (max-width: 720px) {
  .contact-row { grid-template-columns: 32px 1fr auto; gap: 14px; padding: 20px 18px; }
  .cr-label { display: none; }
  .cr-arrow { width: 38px; height: 38px; }
  /* Smaller arrow + tighter padding on mobile → pull the glass clear in. */
  .contact-row::after { right: 76px; }
}

.contact-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(246, 229, 160, 0.22);
  border-bottom: 1px solid rgba(246, 229, 160, 0.22);
  margin-bottom: 80px;
  position: relative;
}
/* Frosted glass band — same treatment as the contact rows. No arrow circles
   here, so the band spans full width with a symmetric edge fade. */
.contact-meta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 252, 244, 0.08) 0%, rgba(255, 252, 244, 0.04) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(95%);
          backdrop-filter: blur(22px) saturate(95%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.contact-meta > * { position: relative; z-index: 1; }
.meta-col {
  padding: 32px 28px 32px 0;
  border-right: 1px solid rgba(246, 229, 160, 0.18);
}
.meta-col:last-child { border-right: 0; }
.meta-eyebrow {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--butter-soft);
  margin-bottom: 14px;
}
.meta-text {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 6px;
}
.meta-sub {
  font: 12px/1.4 "Inter", sans-serif;
  color: rgba(247, 240, 219, 0.55);
}
@media (max-width: 720px) {
  .contact-meta { grid-template-columns: 1fr; }
  .meta-col { border-right: 0; border-bottom: 1px solid rgba(246, 229, 160, 0.18); padding: 20px 0; }
  .meta-col:last-child { border-bottom: 0; }
}

.contact-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  padding-top: 48px;
  border-top: 1px solid rgba(246, 229, 160, 0.18);
  flex-wrap: wrap;
}
.foot-mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foot-mark .brand-script { line-height: 0.9; }
.foot-tag {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--butter-soft);
}
.foot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font: 11px/1 "Inter", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 240, 219, 0.55);
}
@media (max-width: 720px) {
  .foot-right { align-items: flex-start; }
}


/* ============================================================
   Ambient looping background video (About + Contact)
   ============================================================ */

.has-ambient {
  position: relative;
  background: transparent;
}
.has-ambient > * { position: relative; z-index: 2; }

/* veil sits behind section content, gently tints the fixed caustic canvas.
   Perfectly flat tint — no radial gradient, no vertical gradient — so EVERY
   has-ambient section (About, Toolkit, Services, Contact) renders an
   identical overlay regardless of how tall the section is. */
.ambient-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(16, 62, 84, 0.42);
}

/* About over video — make text legible and premium */
.about.has-ambient {
  background: transparent;
  color: var(--cream);
}
.about.has-ambient .script-title { color: var(--cream); }
.about.has-ambient .script-title em { color: var(--butter); }
.about.has-ambient .lede   { color: rgba(247, 240, 219, 0.92); }
.about.has-ambient p       { color: rgba(247, 240, 219, 0.82); }
.about.has-ambient p em    { color: var(--butter-soft); }
.about.has-ambient p.kicker {
  color: var(--cream);
  border-top-color: rgba(244, 207, 99, 0.35);
}
.about.has-ambient .section-label,
.about.has-ambient .section-label .ttl { color: var(--butter-soft); }
.about.has-ambient .portrait-frame {
  background: rgba(247, 240, 219, 0.06);
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(244, 207, 99, 0.30);
}
.about.has-ambient .ph-stripes {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.45));
}
.about.has-ambient .ph-tag { color: var(--butter-soft); }
.about.has-ambient .portrait-meta { border-top-color: rgba(247, 240, 219, 0.28); }
.about.has-ambient .meta-row { border-bottom-color: rgba(247, 240, 219, 0.18); }
.about.has-ambient .meta-row span:first-child { color: var(--butter-soft); }
.about.has-ambient .meta-row span:last-child  { color: var(--cream); }
/* about-stats removed — now standalone stats-strip section */

/* Contact over video — keep its dark mood, just transparent so video shows */
.contact.has-ambient { background: transparent; }
.contact.has-ambient::before { display: none; } /* let the ambient veil do the work */

/* Seamless seams: section transitions */
.seam-blend {
  position: relative;
  width: 100%;
  height: 240px;
  margin-top: -160px;
  margin-bottom: -120px;
  pointer-events: none;
  z-index: 5;
}
/* dark→dark seam (entire site is pool-deep) */
.seam-into {
  background: transparent;
}
.seam-out {
  background: transparent;
}
/* very first seam (cover → about) is dark on both sides — fade dark→dark for a near-invisible bleed */
main > .seam-blend.seam-into:first-of-type {
  background: transparent;
}

/* veil removed — caustic shader is the background now */

/* Skillset (slide 3) — ambient video like About */
.skillset.has-ambient {
  background: transparent;
  color: var(--cream);
  padding-top: 200px;
}

/* caustics now handled by the global WebGL shader */
@keyframes causticsDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}

/* ============ premium editorial toolkit ============ */
.skillset.editorial {
  padding-top: 180px;
  padding-bottom: 180px;
}
.sk-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sk-head .section-label { justify-content: center; margin-bottom: 28px; }
.sk-title {
  font-size: clamp(72px, 11vw, 168px);
  margin: 0 0 28px;
  line-height: 0.86;
}
.sk-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 480px;
  margin: 0 0 28px;
  color: var(--butter);
}
.sk-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,207,99,0.55), transparent);
}
.sk-rule-mark {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--butter);
  text-shadow: 0 0 18px rgba(244,207,99,0.4);
}
.sk-deck {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  color: rgba(247, 240, 219, 0.92);
  margin: 0 0 40px;
  max-width: 60ch;
}
.sk-deck em {
  font-style: italic;
  color: var(--butter);
}
.sk-stats {
  display: flex;
  align-items: baseline;
  gap: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(244, 207, 99, 0.22);
}
.sk-stats > div { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sk-stats b {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--butter);
}
.sk-stats span {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247, 240, 219, 0.55);
}

/* ============ premium frosted-glass vault ============ */
.sk-vault {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  perspective: 1400px;
}
.sk-vault-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .sk-vault-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sk-vault-grid { grid-template-columns: 1fr; } }

/* one frosted tile */
.sk-tile {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 22px;
  padding: 28px 28px 28px 26px;
  min-height: 148px;
  border-radius: 18px;
  /* real frosted glass: subtle bg + heavy backdrop blur */
  background:
    linear-gradient(135deg, rgba(247, 240, 219, 0.10) 0%, rgba(247, 240, 219, 0.03) 100%);
  border: 1px solid rgba(247, 240, 219, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 30px -12px rgba(16, 62, 84, 0.30),
    0 30px 70px -32px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s, box-shadow 0.5s;
  opacity: 0;
}
.sk-vault.in .sk-tile {
  animation: skTileIn 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes skTileIn {
  0%   { opacity: 0; transform: perspective(1400px) translateY(28px) rotateX(8deg) scale(0.96); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: perspective(1400px) translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1); filter: blur(0); }
}

.sk-tile:hover {
  border-color: rgba(244, 207, 99, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -10px 30px -10px rgba(16, 62, 84, 0.32),
    0 40px 90px -32px rgba(244, 207, 99, 0.32);
}

/* radial glow that follows the cursor (frosted-glass premium tell) */
.sk-tile-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--gx) var(--gy),
    rgba(244, 207, 99, 0.18),
    rgba(244, 207, 99, 0) 60%);
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: screen;
}
.sk-tile:hover .sk-tile-glow { opacity: 1; }

/* italic roman numeral, top-right */
.sk-tile-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(244, 207, 99, 0.65);
  z-index: 2;
}

/* logo chip — square brand-color tile with a gold ring */
.sk-tile-logo {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 32px;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(244, 207, 99, 0.30),
    0 14px 28px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s;
  transform: translateZ(20px);
}
.sk-tile:hover .sk-tile-logo {
  transform: translateZ(40px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 1.5px var(--butter),
    0 0 0 8px rgba(244, 207, 99, 0.10),
    0 18px 36px -10px rgba(244, 207, 99, 0.35);
}
.sk-tile-logo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px solid rgba(244, 207, 99, 0.0);
  transition: border-color 0.5s, inset 0.5s;
  pointer-events: none;
}
.sk-tile:hover .sk-tile-logo-ring {
  inset: -10px;
  border-color: rgba(244, 207, 99, 0.45);
}

.sk-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateZ(10px);
}
.sk-tile-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.005em;
  margin: 0;
  transition: color 0.35s;
}
.sk-tile:hover .sk-tile-name {
  color: var(--butter);
  font-style: italic;
}
.sk-tile-cat {
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  color: rgba(247, 240, 219, 0.70);
  margin: 0;
}
.sk-tile-cat em { font-style: italic; }

/* hairline gold corners */
.sk-tile-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-color: rgba(244, 207, 99, 0.55);
  opacity: 0.6;
  transition: opacity 0.4s, width 0.5s, height 0.5s;
}
.sk-tile-corner.tl { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.sk-tile-corner.tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; }
.sk-tile-corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid; border-left: 1px solid; }
.sk-tile-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }
.sk-tile:hover .sk-tile-corner { opacity: 1; width: 22px; height: 22px; }

/* premium diagonal sheen sweep — staggered per tile via --d */
.sk-tile-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(244, 207, 99, 0.10) 48%,
    rgba(247, 240, 219, 0.18) 50%,
    rgba(244, 207, 99, 0.10) 52%,
    transparent 70%);
  transform: translateX(-120%);
  animation: skSheen 6.5s cubic-bezier(0.4, 0.7, 0.4, 1) infinite;
  animation-delay: var(--d, 0ms);
  mix-blend-mode: screen;
}
@keyframes skSheen {
  0%, 75% { transform: translateX(-120%); }
  88%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-tile-shimmer { display: none; }
  .sk-vault.in .sk-tile { animation: none; opacity: 1; }
}

/* drifting sun-mote particle layer */
.sk-dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.sk-dust-spec {
  position: absolute;
  bottom: -20px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,207,99,0.85) 0%, rgba(244,207,99,0) 70%);
  filter: blur(0.5px);
  opacity: 0;
  animation: skDrift var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes skDrift {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translate(var(--drift), -110vh) scale(1); opacity: 0; }
}

/* now-featured premium caption above grid */
.sk-featured {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 0 auto 28px;
  max-width: 920px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s 0.15s, transform 0.8s 0.15s;
}
.sk-vault.in .sk-featured { opacity: 1; transform: translateY(0); }
.sk-featured-eyebrow {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 207, 99, 0.65);
  display: inline-block;
  margin-bottom: 12px;
}
.sk-featured-line {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  color: var(--cream);
  flex-wrap: wrap;
  justify-content: center;
}
.sk-featured-num {
  font-style: italic;
  color: rgba(244, 207, 99, 0.85);
  letter-spacing: 0.1em;
}
.sk-featured-name {
  font-style: italic;
  color: var(--butter);
  text-shadow: 0 0 24px rgba(244, 207, 99, 0.35);
  animation: skFeatRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sk-featured-sep { color: rgba(247, 240, 219, 0.4); }
.sk-featured-cat {
  color: rgba(247, 240, 219, 0.78);
  animation: skFeatRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 80ms backwards;
}
@keyframes skFeatRise {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.sk-featured-ticker {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.sk-tick {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(247, 240, 219, 0.20);
  transition: background 0.35s, width 0.35s;
}
.sk-tick.on { background: var(--butter); width: 32px; box-shadow: 0 0 10px rgba(244, 207, 99, 0.55); }

/* gold light sweep across the grid on first reveal */
.sk-vault-grid { position: relative; }
.sk-sweep {
  position: absolute;
  inset: -10px -10px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(244, 207, 99, 0.18) 46%,
    rgba(247, 240, 219, 0.45) 50%,
    rgba(244, 207, 99, 0.18) 54%,
    transparent 70%);
  transform: translateX(-130%);
  mix-blend-mode: screen;
  opacity: 0;
}
.sk-vault.in .sk-sweep {
  animation: skSweep 1.6s cubic-bezier(0.4, 0.7, 0.4, 1) 0.4s 1 forwards;
}
@keyframes skSweep {
  0%   { transform: translateX(-130%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* spotlight (active/featured) tile — gold ring + scale up */
.sk-tile.active {
  border-color: rgba(244, 207, 99, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -10px 30px -10px rgba(16, 62, 84, 0.32),
    0 0 0 1px rgba(244, 207, 99, 0.45),
    0 50px 100px -32px rgba(244, 207, 99, 0.38);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
}
.sk-tile.active .sk-tile-logo {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 1.5px var(--butter),
    0 0 0 8px rgba(244, 207, 99, 0.12),
    0 18px 36px -10px rgba(244, 207, 99, 0.4);
}
.sk-tile.active .sk-tile-logo-ring { inset: -10px; border-color: rgba(244, 207, 99, 0.55); }
.sk-tile.active .sk-tile-name { color: var(--butter); font-style: italic; }
.sk-tile.active .sk-tile-corner { opacity: 1; width: 22px; height: 22px; }
.sk-tile.active .sk-tile-num { color: var(--butter); }

@media (prefers-reduced-motion: reduce) {
  .sk-dust, .sk-sweep { display: none; }
}

/* ============ The Pond — water-ripple toolkit ============ */
.sk-pond {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.sk-pond-defs { position: absolute; width: 0; height: 0; }

/* drifting caustics — sun on water */
.sk-caustics {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 35% 25% at 20% 30%, rgba(244, 207, 99, 0.10), transparent 60%),
    radial-gradient(ellipse 30% 22% at 75% 70%, rgba(247, 240, 219, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 28% at 50% 50%, rgba(244, 207, 99, 0.06), transparent 60%);
  filter: blur(20px);
  mix-blend-mode: screen;
  animation: skCausticsDrift 24s ease-in-out infinite alternate;
}
@keyframes skCausticsDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -3%) scale(1.05); }
}

/* idle caption — italic Cormorant, swaps in on hover */
.sk-pond-caption {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s 0.1s, transform 0.8s 0.1s;
}
.sk-pond.in .sk-pond-caption { opacity: 1; transform: translateY(0); }
.sk-pond-eyebrow {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 207, 99, 0.65);
  display: block;
  margin-bottom: 14px;
}
.sk-pond-line {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--cream);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  align-items: baseline;
  min-height: 1.6em;
}
.sk-pond-idle { color: rgba(247, 240, 219, 0.78); }
.sk-pond-num { font-style: italic; color: rgba(244, 207, 99, 0.85); letter-spacing: 0.1em; }
.sk-pond-name { font-style: italic; color: var(--butter); text-shadow: 0 0 24px rgba(244, 207, 99, 0.35); }
.sk-pond-sep { color: rgba(247, 240, 219, 0.4); }
.sk-pond-cat { color: rgba(247, 240, 219, 0.78); }

/* the pond surface — 3×3 grid with intentional asymmetric offsets */
.sk-pond-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(220px, auto));
  gap: 0;
}
@media (max-width: 880px) {
  .sk-pond-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
}
@media (max-width: 540px) {
  .sk-pond-grid { grid-template-columns: 1fr; }
}

/* one lily pad — stone + ambient ripples + caption */
.sk-lily {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transform: translate(var(--dx, 0), var(--dy, 0));
  opacity: 0;
  cursor: pointer;
}
.sk-pond.in .sk-lily {
  animation:
    skLilyIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) forwards,
    skLilyFloat var(--float) ease-in-out var(--float-d) infinite;
}
@keyframes skLilyIn {
  0%   { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(0.8); filter: blur(10px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); filter: blur(0); }
}
@keyframes skLilyFloat {
  0%, 100% { transform: translate(var(--dx), var(--dy)); }
  50%      { transform: translate(calc(var(--dx) + 0.5%), calc(var(--dy) - 6px)); }
}

/* concentric ambient ripple rings */
.sk-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 207, 99, 0.30);
  opacity: 0;
  pointer-events: none;
  /* center ripples around the stone (which is offset toward top of column) */
  transform: translate(0, calc(-100% + 44px)) scale(1);
}
.sk-lily { /* compute stone offset */ }
.sk-pond.in .sk-ripple {
  animation: skRippleAmb 4.5s ease-out infinite;
}
.sk-ripple.r1 { animation-delay: 0s; }
.sk-ripple.r2 { animation-delay: 1.5s; }
.sk-ripple.r3 { animation-delay: 3s; }
@keyframes skRippleAmb {
  0%   { transform: translate(0, calc(-100% + 44px)) scale(0.85); opacity: 0; border-color: rgba(244, 207, 99, 0.55); }
  15%  { opacity: 0.55; }
  100% { transform: translate(0, calc(-100% + 44px)) scale(2.6); opacity: 0; border-color: rgba(247, 240, 219, 0.10); }
}
.sk-lily.on .sk-ripple { animation-duration: 2.8s; border-color: rgba(244, 207, 99, 0.65); }

/* click-burst ripple — bigger, faster, gold */
.sk-ripple-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  border: 1.5px solid var(--butter);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, calc(-100% + 44px)) scale(1);
  animation: skBurst 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1;
  box-shadow: 0 0 24px rgba(244, 207, 99, 0.4);
}
@keyframes skBurst {
  0%   { transform: translate(0, calc(-100% + 44px)) scale(0.8); opacity: 0.95; }
  100% { transform: translate(0, calc(-100% + 44px)) scale(3.4); opacity: 0; }
}

/* the stone — circular logo medallion */
.sk-stone {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 36px;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -8px 16px -6px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(244, 207, 99, 0.30),
    0 18px 40px -14px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
}
.sk-stone-glyph { position: relative; z-index: 2; }
.sk-stone-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 60% 40% at 30% 25%, rgba(255, 255, 255, 0.45), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.sk-lily.on .sk-stone {
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -8px 16px -6px rgba(0, 0, 0, 0.40),
    0 0 0 1.5px var(--butter),
    0 0 0 8px rgba(244, 207, 99, 0.10),
    0 24px 48px -12px rgba(244, 207, 99, 0.45);
}

/* caption under each medallion */
.sk-lily-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  color: var(--cream);
  z-index: 2;
}
.sk-lily-num {
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(244, 207, 99, 0.65);
}
.sk-lily-name {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: color 0.35s, font-style 0.35s;
}
.sk-lily.on .sk-lily-name {
  color: var(--butter);
  font-style: italic;
}
.sk-lily-cat {
  font-size: 13px;
  color: rgba(247, 240, 219, 0.70);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .sk-ripple, .sk-ripple-burst, .sk-caustics { display: none; }
  .sk-pond.in .sk-lily { animation: skLilyIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) forwards; }
}

/* hide all previous skillset experiments */
.sk-vault, .sk-spread, .sk-orbit, .sk-credits, .sk-pond, .sk-spec { display: none !important; }

/* ============ The Index — kinetic premium type list ============ */
.sk-idx {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
.sk-idx-head { text-align: center; margin-bottom: 72px; }
.sk-idx-eyebrow {
  display: block;
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 207, 99, 0.7);
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s, transform .9s;
}
.sk-idx.in .sk-idx-eyebrow { opacity: 1; transform: translateY(0); }
.sk-idx-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  color: var(--cream);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s .15s, transform 1s .15s cubic-bezier(.2,.7,.2,1);
}
.sk-idx.in .sk-idx-title { opacity: 1; transform: translateY(0); }
.sk-idx-tag {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(247, 240, 219, 0.78);
  max-width: 56ch;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s .8s;
}
.sk-idx.in .sk-idx-tag { opacity: 1; }
.sk-idx-tag b { font-style: italic; font-weight: 500; color: var(--butter); }

.sk-idx-list { list-style: none; margin: 0; padding: 0; }
.sk-idx-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 56px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 12px;
  border-bottom: 1px solid rgba(247, 240, 219, 0.10);
  cursor: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--d) cubic-bezier(.2,.7,.2,1), transform .9s var(--d) cubic-bezier(.2,.7,.2,1), padding .5s cubic-bezier(.2,.7,.2,1), background .35s;
}
.sk-idx.in .sk-idx-row { opacity: 1; transform: translateY(0); }
.sk-idx-row:hover { padding-left: 28px; background: linear-gradient(90deg, rgba(244, 207, 99, 0.04), transparent 60%); }

.sk-idx-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(244, 207, 99, 0.55);
  transition: color .35s;
}
.sk-idx-row.on .sk-idx-num, .sk-idx-row.active .sk-idx-num { color: var(--butter); }

.sk-idx-dot {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  opacity: 0; transform: scale(0.5);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}
.sk-idx-dot > span {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px rgba(244,207,99,0.4), 0 8px 20px -8px rgba(244,207,99,0.5);
}
.sk-idx-row.on .sk-idx-dot, .sk-idx-row.active .sk-idx-dot { opacity: 1; transform: scale(1); }

/* name + one-liner stacked in the main column */
.sk-idx-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-idx-name {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: color .55s ease, text-shadow .55s ease, font-style .55s ease;
  text-shadow: none;
}
.sk-idx-row.on .sk-idx-name,
.sk-idx-row.active .sk-idx-name {
  color: var(--butter);
  font-style: italic;
  text-shadow:
    0 0 8px  rgba(244, 207, 99, 0.85),
    0 0 16px rgba(244, 207, 99, 0.55),
    0 0 28px rgba(244, 207, 99, 0.30);
}
.sk-idx-line {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.3;
  color: rgba(247, 240, 219, 0.55);
  letter-spacing: 0.01em;
  transition: color .45s ease, opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  opacity: 0.85;
}
.sk-idx-line em { font-style: italic; }
.sk-idx-row.on .sk-idx-line,
.sk-idx-row.active .sk-idx-line {
  color: rgba(244, 207, 99, 0.92);
  opacity: 1;
}

/* gold ink-rule wipes under the active row */
.sk-idx-rule {
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--butter), rgba(244,207,99,0.4) 70%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 0 6px rgba(244,207,99,0.4));
}
.sk-idx-row.on .sk-idx-rule, .sk-idx-row.active .sk-idx-rule { transform: scaleX(1); }

.sk-idx-cat {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px, 1vw, 16px);
  color: rgba(247, 240, 219, 0.55);
  letter-spacing: 0.04em;
  text-align: right;
  min-width: 180px;
  opacity: 0.65;
  transform: translateX(8px);
  transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1), color .35s;
}
.sk-idx-row.on .sk-idx-cat, .sk-idx-row.active .sk-idx-cat {
  opacity: 1; transform: translateX(0); color: rgba(247,240,219,0.95);
}

.sk-idx-arrow {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(244, 207, 99, 0.30);
  border-radius: 50%;
  color: var(--butter);
  font-size: 14px;
  opacity: 0;
  transform: translate(-6px, 6px) rotate(-25deg);
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s;
}
.sk-idx-row.on .sk-idx-arrow {
  opacity: 1; transform: translate(0, 0) rotate(0deg);
  background: rgba(244, 207, 99, 0.10);
  border-color: var(--butter);
}

@media (max-width: 880px) {
  .sk-idx-row { grid-template-columns: 32px 1fr auto; gap: 14px; padding: 16px 6px; }
  .sk-idx-row .sk-idx-dot, .sk-idx-row .sk-idx-arrow { display: none; }
  .sk-idx-cat { min-width: 0; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-idx-row, .sk-idx-rule, .sk-idx-cat, .sk-idx-arrow, .sk-idx-dot, .sk-idx-eyebrow, .sk-idx-tag, .sk-idx-title, .sk-idx-name {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ============ premium type-only film-credits over video ============ */
.sk-credits {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 0 20px;
}
/* hairline gold rules — top + bottom */
.sk-credit-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 207, 99, 0.55) 18%,
    var(--butter) 50%,
    rgba(244, 207, 99, 0.55) 82%,
    transparent 100%);
  filter: drop-shadow(0 0 10px rgba(244, 207, 99, 0.30));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sk-credits.in .sk-credit-rule { transform: scaleX(1); }
.sk-credit-rule.top { margin-bottom: 18px; }
.sk-credit-rule.bottom { margin-top: 18px; }

.sk-credit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;
}
@media (max-width: 720px) {
  .sk-credit-list { grid-template-columns: 1fr; column-gap: 0; }
}

/* one credit row — italic roman, name in serif, dotted leader, italic category */
.sk-credit {
  position: relative;
  display: grid;
  grid-template-columns: 36px auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 6px;
  border-bottom: 1px solid rgba(247, 240, 219, 0.10);
  opacity: 0;
  transform: translateY(8px);
  transition: color 0.4s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: default;
}
.sk-credits.in .sk-credit {
  animation: skFade 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes skFade {
  to { opacity: 1; transform: translateY(0); }
}

.sk-credit-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(244, 207, 99, 0.6);
  text-align: right;
  transition: color 0.35s;
}
.sk-credit-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: color 0.35s, font-style 0.35s;
}
.sk-credit-dotline {
  align-self: center;
  height: 1px;
  background-image: radial-gradient(circle, rgba(247, 240, 219, 0.35) 1px, transparent 1.5px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  transition: background-image 0.35s, opacity 0.35s;
  opacity: 0.7;
}
.sk-credit-cat {
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  color: rgba(247, 240, 219, 0.65);
  text-align: right;
  white-space: nowrap;
  transition: color 0.35s;
}
.sk-credit-cat em { font-style: italic; }

.sk-credit:hover .sk-credit-num { color: var(--butter); }
.sk-credit:hover .sk-credit-name {
  color: var(--butter);
  font-style: italic;
  text-shadow: 0 0 18px rgba(244, 207, 99, 0.30);
}
.sk-credit:hover .sk-credit-dotline {
  background-image: radial-gradient(circle, var(--butter) 1px, transparent 1.5px);
  opacity: 1;
}
.sk-credit:hover .sk-credit-cat { color: var(--cream); }

/* slow gold scan line — drifts horizontally across the credits, calls back to film leader */
.sk-credit-scan {
  position: absolute;
  top: 0; bottom: 0;
  left: -10%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 207, 99, 0.05) 35%,
    rgba(244, 207, 99, 0.10) 50%,
    rgba(244, 207, 99, 0.05) 65%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: skScan 9s linear infinite;
  opacity: 0;
}
.sk-credits.in .sk-credit-scan { opacity: 1; }
@keyframes skScan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(420%); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-credit-scan { display: none; }
}

/* hide all the previous skillset experiments */
.sk-spread, .sk-orbit { display: none !important; }

/* ============ premium editorial — orbital dial ============ */
.sk-orbit {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.sk-orbit-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
}
.sk-orbit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: skRingDrift 40s linear infinite;
}
@keyframes skRingDrift {
  to { transform: rotate(360deg); }
}

/* nine pins on the outer circle */
.sk-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  width: 1px;
  height: 1px;
  pointer-events: auto;
}
.sk-pin-tick {
  position: absolute;
  left: -1px; top: -10px;
  width: 1px;
  height: 20px;
  background: rgba(244, 207, 99, 0.45);
  transition: background 0.4s, height 0.4s;
}
.sk-pin.on .sk-pin-tick {
  background: var(--butter);
  height: 28px;
  box-shadow: 0 0 12px rgba(244, 207, 99, 0.6);
}
.sk-pin-mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1px rgba(244, 207, 99, 0.35),
    0 8px 22px -8px rgba(0,0,0,0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s, opacity 0.5s;
  opacity: 0.55;
}
.sk-pin:hover .sk-pin-mark { opacity: 1; }
.sk-pin.on .sk-pin-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 0 0 1.5px var(--butter),
    0 0 0 8px rgba(244, 207, 99, 0.10),
    0 16px 32px -10px rgba(244, 207, 99, 0.4);
}

.sk-pin-label {
  position: absolute;
  left: 50%; top: 50%;
  font: 9px/1 "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(247, 240, 219, 0.5);
  white-space: nowrap;
  transition: color 0.4s;
}
.sk-pin.on .sk-pin-label,
.sk-pin:hover .sk-pin-label {
  color: var(--butter);
  text-shadow: 0 0 12px rgba(244, 207, 99, 0.4);
}

/* center plaque */
.sk-orbit-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 280px;
  animation: skCenterIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes skCenterIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.sk-orbit-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(244, 207, 99, 0.7);
}
.sk-orbit-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(244, 207, 99, 0.55);
  text-transform: lowercase;
}
.sk-orbit-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.sk-orbit-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--butter);
  margin: 4px 0;
  box-shadow: 0 0 12px rgba(244, 207, 99, 0.6);
}
.sk-orbit-line {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(247, 240, 219, 0.78);
  margin: 0;
  max-width: 26ch;
}
.sk-orbit-line em { color: var(--butter); }

.sk-orbit-ticker {
  display: flex;
  gap: 5px;
  margin-top: 14px;
}
.sk-tick {
  width: 14px;
  height: 1px;
  background: rgba(247, 240, 219, 0.20);
  transition: background 0.4s, height 0.4s, width 0.4s;
}
.sk-tick.on {
  background: var(--butter);
  height: 2px;
  width: 22px;
  box-shadow: 0 0 8px rgba(244, 207, 99, 0.6);
}

@media (max-width: 720px) {
  .sk-orbit { max-width: 480px; }
  .sk-orbit-name { font-size: 32px; }
  .sk-orbit-line { font-size: 14px; }
  .sk-pin-mark { width: 34px; height: 34px; font-size: 13px; }
  .sk-pin-label { display: none; }
}

/* hide old spread layout */
.sk-spread { display: none !important; }

/* ============ premium editorial spread ============ */
.sk-spread {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 88px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .sk-spread { grid-template-columns: 1fr; gap: 56px; }
}

/* — featured viewer (left) — */
.sk-feature {
  position: relative;
  padding: 36px 36px 30px;
  border: 1px solid rgba(244, 207, 99, 0.28);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(247,240,219,0.06), rgba(247,240,219,0.02));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 80px -40px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
}
.sk-feature::before,
.sk-feature::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
}
.sk-feature::before {
  top: 12px; left: 12px;
  border-top: 1px solid var(--butter);
  border-left: 1px solid var(--butter);
}
.sk-feature::after {
  bottom: 12px; right: 12px;
  border-bottom: 1px solid var(--butter);
  border-right: 1px solid var(--butter);
}

.sk-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 10px/1 "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--butter-soft);
  margin-bottom: 32px;
}
.sk-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 4px rgba(244, 207, 99, 0.18);
  animation: stampPulse 2.6s ease-in-out infinite;
}

.sk-feature-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  animation: skFeatureIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes skFeatureIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sk-feature-mark {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 56px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1px rgba(244, 207, 99, 0.45),
    0 0 0 8px rgba(244, 207, 99, 0.06),
    0 30px 60px -20px rgba(0,0,0,0.55);
}
.sk-feature-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-feature-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: rgba(244, 207, 99, 0.7);
  text-transform: lowercase;
}
.sk-feature-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.sk-feature-line {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(247, 240, 219, 0.78);
  margin: 0;
  max-width: 32ch;
}

.sk-feature-bar {
  display: flex;
  gap: 6px;
  margin-top: 32px;
}
.sk-bar {
  flex: 1;
  height: 1px;
  background: rgba(247, 240, 219, 0.20);
  transition: background 0.45s, height 0.45s;
}
.sk-bar.on {
  background: var(--butter);
  height: 2px;
  box-shadow: 0 0 12px rgba(244, 207, 99, 0.6);
}

/* — index column (right) — */
.sk-index-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sk-index-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 10px/1 "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--butter-soft);
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(244, 207, 99, 0.30);
  margin-bottom: 6px;
}
.sk-index-count {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(244, 207, 99, 0.7);
  font-size: 13px;
}

.sk-index {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-idx-row {
  display: grid;
  grid-template-columns: 48px auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 14px 4px;
  cursor: default;
  border-bottom: 1px solid rgba(247, 240, 219, 0.10);
  opacity: 0;
  transform: translateY(8px);
  animation: skRise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  transition: padding-left 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.35s, color 0.35s;
}
@keyframes skRise {
  to { opacity: 1; transform: translateY(0); }
}
.sk-idx-row:hover { padding-left: 18px; }
.sk-idx-row.on {
  padding-left: 18px;
  background: linear-gradient(90deg, rgba(244,207,99,0.10), transparent 80%);
}

.sk-idx-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(244, 207, 99, 0.55);
  text-align: center;
  letter-spacing: 0.05em;
  transition: color 0.35s, font-size 0.35s;
}
.sk-idx-row.on .sk-idx-num { color: var(--butter); font-size: 18px; }

.sk-idx-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  color: rgba(247, 240, 219, 0.82);
  letter-spacing: -0.005em;
  line-height: 1;
  transition: color 0.35s;
}
.sk-idx-row.on .sk-idx-name { color: var(--butter); font-style: italic; }

.sk-idx-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(247,240,219,0.18), transparent);
  align-self: center;
  transition: background 0.35s;
}
.sk-idx-row.on .sk-idx-rule {
  background: linear-gradient(90deg, var(--butter), transparent);
}

.sk-idx-cat {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(247, 240, 219, 0.50);
  text-align: right;
  white-space: nowrap;
  transition: color 0.35s;
}
.sk-idx-row.on .sk-idx-cat { color: rgba(247, 240, 219, 0.85); }

@media (max-width: 980px) {
  .sk-feature { min-height: 380px; padding: 28px; }
  .sk-feature-mark { width: 96px; height: 96px; font-size: 42px; }
  .sk-idx-row { grid-template-columns: 36px auto 1fr; gap: 12px; }
  .sk-idx-cat { display: none; }
}

/* legacy list — kept for backwards compat but unused by new layout */
.sk-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  border-top: 1px solid rgba(244, 207, 99, 0.30);
}
.sk-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 56px 1fr auto 56px;
  align-items: center;
  gap: 28px;
  padding: 28px 24px;
  border-bottom: 1px solid rgba(244, 207, 99, 0.22);
  cursor: default;
  opacity: 0;
  transform: translateY(12px);
  animation: skRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  transition: padding-left 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
              padding-right 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.4s;
}
@keyframes skRise {
  to { opacity: 1; transform: translateY(0); }
}
.sk-row::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--butter), transparent);
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sk-row:hover {
  padding-left: 36px;
  padding-right: 36px;
  background: linear-gradient(90deg, rgba(244,207,99,0.06), transparent 70%);
}
.sk-row:hover::before { width: 100%; }

.sk-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: rgba(244, 207, 99, 0.75);
}
.sk-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1px rgba(244, 207, 99, 0.35),
    0 8px 22px -8px rgba(0,0,0,0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s;
}
.sk-row:hover .sk-mark {
  transform: scale(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 0 0 1px var(--butter),
    0 14px 28px -10px rgba(244, 207, 99, 0.35);
}
.sk-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: color 0.4s;
}
.sk-row:hover .sk-name { color: var(--butter); }
.sk-cat {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 18px);
  color: rgba(247, 240, 219, 0.65);
  text-align: right;
  max-width: 32ch;
}
.sk-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(244, 207, 99, 0.55);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.4s;
}
.sk-row:hover .sk-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--butter);
}

/* footer line in caps + romans */
.sk-foot {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 56px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(247, 240, 219, 0.45);
}
.sk-foot-c {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(244, 207, 99, 0.65);
}

@media (max-width: 880px) {
  .sk-stats { gap: 32px; }
  .sk-row { grid-template-columns: 48px 40px 1fr; gap: 16px; padding: 22px 12px; }
  .sk-cat, .sk-arrow { display: none; }
  .sk-name { font-size: 30px; }
  .sk-foot { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* hide legacy grid layout if present */
.skillset.editorial .skill-head,
.skillset.editorial .tool-grid,
.skillset.editorial .caustics { display: none; }

/* aligned glass tile grid — perfectly even 3×3, no tilt, no idle float */
.tool-grid.pool {
  position: relative;
  z-index: 2;
  grid-auto-rows: 1fr;        /* equal row heights */
  gap: 22px;
}
.skillset .tool-card.glass.editorial {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px 28px 28px 26px;
  min-height: 130px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(247,240,219,0.10) 0%, rgba(247,240,219,0.04) 100%);
  border: 1px solid rgba(247,240,219,0.20);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -8px 22px -10px rgba(16,62,84,0.28),
    0 24px 60px -32px rgba(0,0,0,0.55);
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s,
    box-shadow 0.5s;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  opacity: 0;
}
.skillset .tool-card.glass.editorial:hover {
  transform: translateY(-6px);
  border-color: rgba(244,207,99,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -8px 22px -10px rgba(16,62,84,0.35),
    0 38px 80px -32px rgba(244,207,99,0.28);
}

/* editorial serial number in the top-right of each tile */
.skillset .tool-index {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(244, 207, 99, 0.75);
  z-index: 2;
}

/* hairline gold corners — premium editorial detail */
.skillset .tool-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  transition: opacity 0.4s, width 0.5s, height 0.5s;
}
.skillset .tool-corner-tl {
  top: 10px; left: 10px;
  border-top: 1px solid rgba(244,207,99,0.7);
  border-left: 1px solid rgba(244,207,99,0.7);
}
.skillset .tool-corner-br {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid rgba(244,207,99,0.7);
  border-right: 1px solid rgba(244,207,99,0.7);
}
.skillset .tool-card.glass.editorial:hover .tool-corner {
  opacity: 1;
  width: 26px;
  height: 26px;
}

/* gentle moving sheen across each tile (water shimmer) */
.skillset .tool-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.18) 50%,
    transparent 65%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  mix-blend-mode: overlay;
  opacity: 0.7;
  animation: shimmerSweep 6.5s ease-in-out infinite;
}
@keyframes shimmerSweep {
  0%   { background-position: 220% 0; }
  60%  { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}

/* on-hover ripple — radial expansion */
.skillset .tool-ripple {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(244,207,99,0.30) 0%, rgba(244,207,99,0) 60%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s ease-out, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.skillset .tool-card.glass:hover .tool-ripple {
  opacity: 1;
  transform: scale(1.3);
}

/* logo refinements over glass */
.skillset .tool-card.glass .tool-logo {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 8px 18px -10px rgba(0,0,0,0.5);
  border-radius: 16px;
  position: relative;
  z-index: 1;
}
.skillset .tool-card.glass .tool-meta { position: relative; z-index: 1; }
.skillset .tool-card.glass .tool-name { color: var(--cream); }
.skillset .tool-card.glass .tool-sub  {
  color: rgba(247, 240, 219, 0.78);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .skillset .tool-card.glass,
  .skillset .tool-shimmer,
  .skillset .caustics { animation: none !important; }
}
.skillset {
  background: #234857;
  color: var(--cream);
  padding-top: 200px;
}
.skillset .script-title { color: var(--cream); }
.skillset .script-title em { color: var(--butter); }
.skillset .lede,
.skillset .lede.right { color: rgba(247, 240, 219, 0.92); }
.skillset .section-label,
.skillset .section-label .ttl { color: var(--butter-soft); }
.skillset .tool-card {
  background: rgba(247, 240, 219, 0.06);
  border: 1px solid rgba(247, 240, 219, 0.16);
  color: var(--cream);
}
.skillset .tool-card:hover {
  background: rgba(244, 207, 99, 0.10);
  border-color: rgba(244, 207, 99, 0.40);
}
.skillset .tool-card b { color: var(--cream); }
.skillset .tool-card span { color: rgba(247, 240, 219, 0.72); }
.skillset .tool-name { color: var(--cream); }
.skillset .tool-sub  { color: var(--butter-soft); }

@media (max-width: 720px) {
  .seam-blend { height: 160px; margin-top: -100px; margin-bottom: -80px; }
}


/* blend cover bottom into ambient / stats strip seamlessly */
.cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  background: linear-gradient(180deg,
    rgba(16, 62, 84, 0)    0%,
    rgba(16, 62, 84, 0.15) 20%,
    rgba(16, 62, 84, 0.35) 40%,
    rgba(16, 62, 84, 0.58) 55%,
    rgba(16, 62, 84, 0.78) 70%,
    rgba(16, 62, 84, 0.92) 85%,
    rgb(16, 62, 84)         100%);
  pointer-events: none;
  z-index: 3;
}
/* About top: handled by standalone .seam-stats-exit div between stats and about */


/* Services over ambient video */
.services.has-ambient { background: transparent; }
.services.has-ambient .script-title { color: var(--cream); }
.services.has-ambient .script-title em { color: var(--butter); }
.services.has-ambient .lede { color: rgba(247, 240, 219, 0.92); }
.services.has-ambient .section-label,
.services.has-ambient .section-label .ttl { color: var(--butter-soft); }
.services.has-ambient .services-grid {
  border-top-color: rgba(247, 240, 219, 0.30);
  border-left-color: rgba(247, 240, 219, 0.30);
}
.services.has-ambient .service-card {
  border-right-color: rgba(247, 240, 219, 0.20);
  border-bottom-color: rgba(247, 240, 219, 0.20);
}
.services.has-ambient .service-card:hover { background: rgba(244, 207, 99, 0.10); }
.services.has-ambient .service-card:hover .service-num { color: var(--butter); }
.services.has-ambient .service-num { color: var(--butter-soft); }
.services.has-ambient .service-card h3 { color: var(--cream); }
.services.has-ambient .service-card p  { color: rgba(247, 240, 219, 0.78); }


/* ============================================================
   Services → Contact premium interlude
   The ambient video carries through; this is a content-level
   intermission with a gold rule, monogram, and "let's create".
   ============================================================ */
.sc-interlude {
  position: relative;
  width: 100%;
  height: 360px;
  margin-top: -80px;
  margin-bottom: -80px;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.sc-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(8,22,32,0.55), rgba(8,22,32,0) 70%);
  transition: opacity 0.4s ease-out;
}
.sc-rule {
  position: absolute;
  left: 12%; right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,207,99,0.55) 12%, var(--butter) 50%, rgba(244,207,99,0.55) 88%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: drop-shadow(0 0 12px rgba(244,207,99,0.35));
}
.sc-rule-bottom { top: calc(50% + 92px); opacity: 0.4; }
.sc-mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transition: opacity 0.45s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sc-monogram {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(244,207,99,0.55);
  border-radius: 50%;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 26px;
  color: var(--butter);
  background: rgba(8,22,32,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: scPulse 4s ease-in-out infinite;
}
@keyframes scPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,207,99,0.20); }
  50%     { box-shadow: 0 0 0 10px rgba(244,207,99,0); }
}
.sc-script {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  color: var(--butter);
  text-shadow: 0 1px 24px rgba(244,207,99,0.30);
}
.sc-eyebrow {
  font: 10px/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--butter-soft);
  opacity: 0.85;
}
@media (max-width: 720px) {
  .sc-interlude { height: 280px; margin-top: -60px; margin-bottom: -60px; }
  .sc-rule { left: 6%; right: 6%; }
  .sc-rule-bottom { top: calc(50% + 76px); }
}


/* Reels (video walls) — light text on dark pool background */
.video-wall { color: var(--cream); }
.video-wall .script-title { color: var(--cream); }
.video-wall .script-title em { color: var(--butter); }
.video-wall .lede { color: rgba(247, 240, 219, 0.85); }
.video-wall .section-label,
.video-wall .section-label .ttl { color: var(--butter-soft); }
.video-wall .video-tile-caption,
.video-wall .video-tile-caption .label,
.video-wall .video-tile-caption .num { color: var(--cream); }
.video-wall .video-tile-caption .num { color: var(--butter-soft); }
/* vtile label inside dark walls */
.video-wall .vtile-label { color: rgba(247, 240, 219, 0.78); }
.video-wall .vtile-num { color: var(--butter); }


/* ============ section-to-section ombré blur seams ============
   Soft frosted band straddling each boundary between sections. Lighter blur
   to keep GPU cost low (browsers drop backdrop-filter when overloaded).
   Rendered from the wrapper <div>s inside <main> (which don't clip), so the
   blur reaches into both adjacent <section>s past their overflow:hidden. */
main > div {
  position: relative;
}
main > div.no-seam:not(.wall-solid)::before { display: none !important; }
main > div.seam-fade::before { display: none !important; }
main > div + div:not(.seam-blend):not(.wall-solid):not(.seam-fade)::before,
main > div.seam-blend + div:not(.wall-solid):not(.seam-fade)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  height: 180px;
  pointer-events: none;
  z-index: 8;
  /* contain promotes the layer so the GPU treats it as its own surface */
  contain: paint;
  will-change: transform;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.25) 22%,
    rgba(0,0,0,0.85) 50%,
    rgba(0,0,0,0.25) 78%,
    rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.25) 22%,
    rgba(0,0,0,0.85) 50%,
    rgba(0,0,0,0.25) 78%,
    rgba(0,0,0,0)    100%);
}
main > div.seam-blend { z-index: 5; }

/* The toolkit wrapper sits ABOVE the seam-into gradient that follows it,
   so the bag + stamps + warm glow always paint cleanly on top of the
   gradient — no perceivable "cut-off" line where the seam begins. */
main > div#skillset { z-index: 3; }

/* ============ SkillsetSpread — horizontal chip strip ============ */
.sk-strip {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* decorative gold rules flanking the chip list */
.sk-strip-rule {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(90deg, transparent, rgba(244,207,99,0.45), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.8s 0.2s, transform 1s 0.2s cubic-bezier(0.2,0.7,0.2,1);
}
.sk-strip.in .sk-strip-rule {
  opacity: 1;
  transform: scaleX(1);
}

/* the chip list */
.sk-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* individual chip */
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(247, 240, 219, 0.18);
  background: linear-gradient(135deg, rgba(247,240,219,0.08), rgba(247,240,219,0.03));
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  cursor: default;
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.35s,
              box-shadow 0.45s,
              background 0.35s;
}
.sk-strip.in .sk-chip {
  animation: skChipIn 0.7s cubic-bezier(0.2,0.7,0.2,1) var(--d, 0ms) forwards;
}
@keyframes skChipIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.92); filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.sk-chip:hover,
.sk-chip.on {
  border-color: rgba(244, 207, 99, 0.55);
  background: rgba(244, 207, 99, 0.10);
  box-shadow: 0 8px 28px -10px rgba(244, 207, 99, 0.30);
  transform: translateY(-3px);
}

/* medal / glyph circle */
.sk-chip-medal {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.4s;
}
.sk-chip-medal-fill {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg, #111);
  color: var(--fg, #fff);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 0 1px rgba(244,207,99,0.25),
    0 6px 16px -6px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s;
}
.sk-chip:hover .sk-chip-medal,
.sk-chip.on .sk-chip-medal {
  transform: scale(1.12) rotate(-6deg);
}
.sk-chip:hover .sk-chip-medal-fill,
.sk-chip.on .sk-chip-medal-fill {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 0 1.5px var(--butter),
    0 0 0 6px rgba(244,207,99,0.10),
    0 10px 22px -8px rgba(244,207,99,0.4);
}

/* roman numeral + name */
.sk-chip-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(244, 207, 99, 0.6);
  transition: color 0.35s;
}
.sk-chip:hover .sk-chip-num,
.sk-chip.on .sk-chip-num {
  color: var(--butter);
}
.sk-chip-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.005em;
  transition: color 0.35s;
}
.sk-chip:hover .sk-chip-name,
.sk-chip.on .sk-chip-name {
  color: var(--butter);
}

/* caption line below chips */
.sk-strip-cap {
  text-align: center;
  min-height: 1.6em;
}
.sk-strip-cap-line {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 1.4vw, 22px);
  color: rgba(247, 240, 219, 0.78);
  transition: opacity 0.35s;
}
.sk-strip-cap-line em {
  font-style: italic;
  color: var(--butter);
}
.sk-strip-cap-sep {
  color: rgba(247, 240, 219, 0.4);
}

@media (max-width: 720px) {
  .sk-strip-list { gap: 10px; }
  .sk-chip { padding: 8px 14px 8px 10px; gap: 8px; }
  .sk-chip-medal { width: 26px; height: 26px; }
  .sk-chip-medal-fill { font-size: 12px; }
  .sk-chip-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-strip.in .sk-chip { animation: none; opacity: 1; transform: none; }
  .sk-strip.in .sk-strip-rule { transition: none; opacity: 1; transform: scaleX(1); }
}

/* ============ dark→dark seam suppression ============ */
/* All sections share pool-deep, so no blur seams needed anywhere */
#about + #skillset::before,
#skillset + #wall1::before,
#wall1 + #wall2::before,
#wall2 + #wall3::before,
#wall3 + #wall4::before,
#wall4 + .seam-wall-services::before,
.seam-wall-services + #services::before,
#services + #contact::before {
  display: none !important;
}

/* ============ seam: wall4 → services transition ============ */
.seam-wall-services {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: -60px;
  margin-bottom: -60px;
  pointer-events: none;
  z-index: 5;
  background: transparent;
}

/* ============ services inner content constraint ============ */
.services .services-head,
.services .services-table,
.services .srv-featured,
.services .services-grid-list,
.services .srv-grid-eyebrow {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ about inner content constraint ============ */
.about .about-grid,
.about > .section-label {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ services-table premium editorial ============ */
.services-table {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(247, 240, 219, 0.22);
}
.services.has-ambient .services-table {
  border-top-color: rgba(247, 240, 219, 0.22);
}
.srv-row {
  display: grid;
  grid-template-columns: 56px 1fr 1.5fr;
  align-items: baseline;
  gap: 24px;
  padding: 28px 8px;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
}
.services-table.in .srv-row {
  animation: srvRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes srvRowIn {
  to { opacity: 1; transform: translateY(0); }
}
.srv-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(244, 207, 99, 0.65);
}
.srv-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  color: var(--cream);
  margin: 0;
  transition: color 0.35s;
}
.srv-desc {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 240, 219, 0.70);
  margin: 0;
  max-width: none;
}
.srv-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 207, 99, 0.20), rgba(247, 240, 219, 0.10) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}
.services-table.in .srv-rule {
  animation: srvRuleIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes srvRuleIn {
  to { transform: scaleX(1); }
}
@media (max-width: 720px) {
  .srv-row { grid-template-columns: 36px 1fr; gap: 12px; }
  .srv-desc { grid-column: 1 / -1; }
}

/* ============ POLISH: ambient video visible on non-work sections ============
   About, Skillset, Services, Contact → transparent so wave video shows through.
   Work walls → solid pool-deep so portfolio videos stay the focal point. */

/* Non-work sections: transparent backgrounds, video shows through the veil */
#about > section,
#skillset > section,
#services > section {
  background: transparent;
}

/* Collapse the #services wrapper out of the compositing stack.
   main > div { position: relative } creates a compositing layer on every wrapper.
   For #services the blur pseudo-element is already suppressed (.no-seam), so
   position:relative has no purpose — position:static prevents an invisible
   transparent layer from interfering with the seam-outof gradient above.            */
#services { position: static !important; }
#stats    { position: relative; background: var(--pool-deep); }  /* solid bg blocks ambient video */

/* Extra padding on services content: pushes the heading below the seam-outof
   gradient zone so it appears once the teal overlay has mostly faded.               */
#services > .services {
  padding-top: 360px !important;
}

/* Work walls: solid opaque background, no video behind */
/* --- Solid work sections --- */
.wall-solid { background: var(--pool-deep); }
.wall-solid > .video-wall { background: var(--pool-deep); }

/* --- Standalone seam fades (between ambient video and solid sections) ---
   Color MUST match --pool-deep exactly: #103e54 = rgb(16, 62, 84)

   seam-into:  sits ABOVE wall1, overlapping into skillset's empty bottom.
               Gradient overlays the ambient video (transparent area), NOT wall content.
   seam-outof: sits BELOW last wall, overlapping 200px INTO the wall section so the
               compositing boundary is hidden behind the wall's opaque teal. Gradient
               fades from solid teal → transparent over the 600px below the wall end.
               z-index: 2 ensures it paints above the ambient video.                       */
.seam-fade {
  position: relative;
  width: 100%;
  pointer-events: none;
}
/* Into work section: a long, very gradual gradient that resolves the
   ambient-veiled toolkit area to opaque pool-deep before wall1 begins.
   Sits BELOW the toolkit (no negative margin pulling it up over the bag)
   so the bag and its glow always paint cleanly above. The first 40% is
   nearly imperceptible (alpha barely above the veil's resting tint), and
   the resolve happens deep enough that there's no perceivable horizontal
   line where the gradient "begins".                                       */
.seam-into {
  /* One long, smooth resolve: picks up exactly where the toolkit stage left off
     (alpha 0.22, water still showing) and deepens gradually to solid pool-deep
     at its bottom edge — which sits right above "my work". The wave thus blends
     continuously into the page with no band and no fine line. */
  height: 400px;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 62, 84, 0.22) 0%,
    rgba(16, 62, 84, 0.34) 16%,
    rgba(16, 62, 84, 0.48) 32%,
    rgba(16, 62, 84, 0.62) 48%,
    rgba(16, 62, 84, 0.75) 63%,
    rgba(16, 62, 84, 0.86) 77%,
    rgba(16, 62, 84, 0.94) 89%,
    var(--pool-deep) 100%);
}
/* Out of work section: overlaps 200px into the wall above (hidden by wall's
   opaque teal) and 600px into the services area (the visible fade). The
   compositing boundary at the top edge is 200px inside the wall section —
   invisible because both sides are the same opaque teal.                          */
.seam-outof {
  height: 800px;           /* 200px hidden overlap + 600px visible fade */
  margin-top: -200px;      /* pull top 200px into wall — hides compositing boundary */
  margin-bottom: -600px;   /* next element (services) starts at the wall end */
  z-index: 2;              /* above ambient bg (0) and root (1), below content */
  background: linear-gradient(180deg,
    rgb(16, 62, 84)          0px,    /* fully opaque through wall overlap zone */
    rgb(16, 62, 84)        200px,    /* still fully opaque at the wall boundary */
    rgba(16, 62, 84, 0.97) 218px,    /* begin the visible fade below the wall */
    rgba(16, 62, 84, 0.92) 242px,
    rgba(16, 62, 84, 0.86) 272px,
    rgba(16, 62, 84, 0.78) 308px,
    rgba(16, 62, 84, 0.68) 350px,
    rgba(16, 62, 84, 0.57) 398px,
    rgba(16, 62, 84, 0.46) 446px,
    rgba(16, 62, 84, 0.36) 494px,
    rgba(16, 62, 84, 0.27) 542px,
    rgba(16, 62, 84, 0.19) 590px,
    rgba(16, 62, 84, 0.13) 632px,
    rgba(16, 62, 84, 0.08) 674px,
    rgba(16, 62, 84, 0.04) 716px,
    rgba(16, 62, 84, 0.02) 746px,
    rgba(16, 62, 84, 0.005) 770px,
    rgba(16, 62, 84, 0)    800px);   /* fully transparent at bottom */
}

/* Stats → About exit transition: overlaps 80px into stats bottom, 320px into about top */
.seam-stats-exit {
  height: 400px;
  margin-top: -80px;
  margin-bottom: -320px;
  z-index: 2;
  background: linear-gradient(180deg,
    rgb(16, 62, 84)          0px,
    rgb(16, 62, 84)          80px,
    rgba(16, 62, 84, 0.97)  100px,
    rgba(16, 62, 84, 0.92)  125px,
    rgba(16, 62, 84, 0.86)  155px,
    rgba(16, 62, 84, 0.78)  190px,
    rgba(16, 62, 84, 0.68)  225px,
    rgba(16, 62, 84, 0.57)  260px,
    rgba(16, 62, 84, 0.46)  295px,
    rgba(16, 62, 84, 0.36)  325px,
    rgba(16, 62, 84, 0.27)  350px,
    rgba(16, 62, 84, 0.19)  370px,
    rgba(16, 62, 84, 0.10)  385px,
    rgba(16, 62, 84, 0.04)  393px,
    rgba(16, 62, 84, 0)     400px);
}

/* SVG wave dividers removed — ambient video provides the wave motion */

/* ============ POLISH: photo gallery tiles ============ */
/* Photos render at their NATURAL aspect ratio (no 4:5 crop). */
.photo-frame {
  aspect-ratio: auto !important;
  height: auto !important;
  /* width comes from the grid column */
}
.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* fallback safety — never crop */
  border-radius: inherit;
}
/* Inside the flex .vtile, don't let align-items stretch the frame. */
.vtile { align-items: stretch; }
.vtile .photo-frame { align-self: start; }

/* ============ POLISH: scroll-triggered reveal animations ============
   Lightweight, CSS-only animations triggered by a .revealed class
   added via Intersection Observer in JS. No external library needed. */

/* --- fade up (default) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- fade in (no movement) --- */
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="fade"].revealed {
  opacity: 1;
}

/* --- slide from left --- */
[data-reveal="left"] {
  transform: translateX(-50px);
}
[data-reveal="left"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- slide from right --- */
[data-reveal="right"] {
  transform: translateX(50px);
}
[data-reveal="right"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- scale up --- */
[data-reveal="scale"] {
  transform: scale(0.92);
}
[data-reveal="scale"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* stagger delays for child elements */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

/* video tiles stagger in */
.vtile[data-reveal] {
  transition-duration: 0.7s;
}

/* noise texture removed — too heavy for headless renderers */

/* ============ STATS STRIP — full-width number showcase ============
   Between Cover and About. Transparent bg — ambient video shows through.
   Inspired by nuaym.com: big serif numbers, gold accents, mono labels.  */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  padding: 24px 64px 80px;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  /* solid — blocks ambient video for clean transition between cover & about */
  background: var(--pool-deep);
}

/* no top rule — seamless transition from cover; diamonds + content provide structure */

/* override global section padding — stats strip controls its own spacing */
.stats-strip { padding-top: 24px; padding-bottom: 80px; }

/* individual stat cell */
.strip-stat {
  position: relative;
  padding: 44px 40px 24px;
  cursor: default;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.5s;
  transition-delay: var(--d, 0ms);
}
.strip-stat.in {
  opacity: 1;
  transform: translateY(0);
}
.strip-stat:hover {
  background: transparent;
}

/* gold diamond — hidden (was anchored to left, conflicts with centered layout) */
.strip-stat-diamond { display: none; }
.strip-stat.in .strip-stat-diamond {
  opacity: 1;
}

/* vertical divider between cells */
.strip-stat + .strip-stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(247, 240, 219, 0.18) 30%,
    rgba(247, 240, 219, 0.18) 70%,
    transparent);
}

/* roman numeral row — centered with rules on both sides */
.strip-stat-roman {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(247, 240, 219, 0.65);
  text-transform: uppercase;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 260px;
}
.strip-stat-roman::before,
.strip-stat-roman-rule {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(247, 240, 219, 0.20);
  display: block;
}

/* big number — always gold, with glow */
.strip-stat-n {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(84px, 9.6vw, 152px);
  color: var(--butter);
  letter-spacing: -0.03em;
  line-height: 0.95;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 24px rgba(244, 207, 99, 0.55),
    0 0 56px rgba(244, 207, 99, 0.35),
    0 0 100px rgba(244, 207, 99, 0.20);
  transition: text-shadow 0.4s ease;
}
.strip-stat:hover .strip-stat-n {
  /* no hover change — number stays at its default gold + glow */
}
.strip-stat-num {
  display: inline-block;
  min-width: 1ch;
}
.strip-stat-suf {
  color: var(--butter);
  font-style: italic;
  font-size: 0.55em;
  margin-left: 6px;
  font-weight: 400;
  display: inline-block;
  transform: translateY(-0.45em);
  text-shadow:
    0 0 20px rgba(244, 207, 99, 0.6),
    0 0 40px rgba(244, 207, 99, 0.3);
}

/* label row — centered, readable */
.strip-stat-label {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 207, 99, 0.30);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  text-shadow: 0 0 18px rgba(247, 240, 219, 0.25);
}
.strip-stat-label::before,
.strip-stat-trail {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--butter);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
  flex: 0 0 auto;
}
.strip-stat.in .strip-stat-label::before,
.strip-stat.in .strip-stat-trail {
  width: 24px;
}

/* ---- stats strip responsive ---- */
@media (max-width: 768px) {
  .stats-strip {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 48px 32px 56px;
    max-width: 480px;
  }
  .strip-stat {
    padding: 28px 20px 4px;
  }
  .strip-stat + .strip-stat::after {
    /* horizontal rule instead of vertical */
    left: 20px;
    right: 20px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: rgba(247, 240, 219, 0.12);
  }
  .strip-stat-n {
    font-size: clamp(64px, 14vw, 110px);
  }
  .strip-stat-diamond {
    left: 20px;
  }
}


/* =================================================================
   THE ATELIER — 3×3 floating gallery of app chips
   Each chip: rounded-square brand-color medallion (default monogram, or
   override image), italic name, italic descriptor. Cascade-in on scroll,
   gentle per-chip float, 3D cursor-tilt + butter-glow on hover.
   ================================================================= */

/* hide any prior atelier/strip CSS defensively */
.sk-strip, .atelier { display: none !important; }

.atl {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 8px;
  color: var(--cream);
}

/* --- 3×3 grid --- */
.atl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) { .atl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 540px) { .atl-grid { grid-template-columns: 1fr; } }

/* --- one chip --- */
.atl-chip {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  min-height: 130px;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(247, 240, 219, 0.10) 0%, rgba(247, 240, 219, 0.03) 100%);
  border: 1px solid rgba(247, 240, 219, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 22px -10px rgba(16, 62, 84, 0.30),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  perspective: 900px;
  /* base state — animated in via .atl.in below */
  opacity: 0;
  scale: 0.94;
  filter: blur(8px);
  rotate: x var(--rx, 0deg);
  /* tilt + lift transitions on hover */
  transition:
    opacity 0.7s ease,
    scale 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.7s ease,
    border-color 0.4s ease,
    box-shadow 0.5s ease,
    translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
  will-change: scale, translate, opacity;
  transform-style: preserve-3d;
}
.atl.in .atl-chip {
  opacity: 1;
  scale: 1;
  filter: blur(0);
  /* after settling, drift gently on its own timer */
  animation: atlChipFloat var(--float-dur, 6s) ease-in-out var(--float-d, 0s) infinite;
}
@keyframes atlChipFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* hover lift + tilt + butter glow */
.atl-chip:hover {
  border-color: rgba(244, 207, 99, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -10px 22px -10px rgba(16, 62, 84, 0.34),
    0 0 0 1px rgba(244, 207, 99, 0.25),
    0 40px 90px -28px rgba(244, 207, 99, 0.35);
  rotate: y var(--ry, 0deg);
  animation-play-state: paused;
  translate: 0 -6px;
}
/* the rotate-on-hover above only does one axis; instead, use child elements for the tilt */

/* cursor-follow soft butter halo (mix-blend screen) */
.atl-chip-glow {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 30% 20%, rgba(244, 207, 99, 0.22), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s ease;
  mix-blend-mode: screen;
}
.atl-chip:hover .atl-chip-glow { opacity: 1; }

/* hairline gold corners */
.atl-chip-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
  border-color: rgba(244, 207, 99, 0.55);
  opacity: 0.5;
  transition: opacity 0.4s, width 0.45s, height 0.45s;
}
.atl-chip-corner.tl { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.atl-chip-corner.tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; }
.atl-chip-corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid; border-left: 1px solid; }
.atl-chip-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }
.atl-chip:hover .atl-chip-corner { opacity: 1; width: 22px; height: 22px; }

/* --- app-icon medallion (rounded square — iOS style) --- */
.atl-chip-icon {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 22%;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
    inset 0 -10px 18px -8px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(244, 207, 99, 0.18),
    0 16px 32px -12px rgba(0, 0, 0, 0.55);
  transition:
    rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    scale 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease;
  z-index: 1;
  flex-shrink: 0;
  align-self: center;
}
.atl-chip:hover .atl-chip-icon {
  rotate: -6deg;
  scale: 1.06;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 18px -8px rgba(0, 0, 0, 0.28),
    0 0 0 1.5px rgba(244, 207, 99, 0.6),
    0 0 0 6px rgba(244, 207, 99, 0.10),
    0 22px 40px -10px rgba(244, 207, 99, 0.35);
}

/* glass sheen inside the medallion (always-on subtle gloss) */
.atl-chip-icon-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 65% 40% at 30% 22%, rgba(255, 255, 255, 0.40), transparent 60%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 2;
}

/* monogram glyph */
.atl-chip-icon-glyph {
  position: relative;
  z-index: 1;
  line-height: 1;
  font-feature-settings: "ss01";
  letter-spacing: -0.02em;
}

/* user-supplied logo image */
.atl-chip-icon-img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* --- body: number, name, descriptor --- */
.atl-chip-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.atl-chip-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(244, 207, 99, 0.65);
  text-transform: lowercase;
  margin-bottom: 2px;
  transition: color 0.35s;
}
.atl-chip:hover .atl-chip-num { color: var(--butter); }

.atl-chip-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1;
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.005em;
  transition: color 0.35s, font-style 0.35s;
}
.atl-chip:hover .atl-chip-name {
  color: var(--butter);
  font-style: italic;
  text-shadow: 0 0 22px rgba(244, 207, 99, 0.25);
}

.atl-chip-sub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.35;
  color: rgba(247, 240, 219, 0.66);
  transition: color 0.35s;
}
.atl-chip-sub em { font-style: italic; }
.atl-chip:hover .atl-chip-sub { color: rgba(247, 240, 219, 0.92); }

/* --- gold ornament footer rule --- */
.atl-foot-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  margin: 64px 0 0;
  opacity: 0;
  transition: opacity 1s 0.4s ease;
}
.atl.in .atl-foot-rule { opacity: 1; }
.atl-foot-rule > span:not(.atl-foot-orn) {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 207, 99, 0.55), transparent);
}
.atl-foot-orn {
  font-size: 16px;
  color: var(--butter);
  text-shadow: 0 0 12px rgba(244, 207, 99, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .atl.in .atl-chip { animation: none; }
}

/* --- tighten section --- */
.skillset.editorial {
  padding-top: 120px;
  padding-bottom: 120px;
}
.skillset .sk-head { margin: 0 auto 56px; }
.skillset .sk-title {
  font-size: clamp(60px, 8.5vw, 128px);
  line-height: 1.1;
  padding-bottom: 0.12em;
  margin: 0 0 36px;
}
.skillset .sk-deck {
  font-size: clamp(17px, 1.4vw, 22px);
  margin: 18px 0 28px;
}
.skillset .sk-foot { margin-top: 64px; }

/* =================================================================
   VIDEO TILE LOADING SHIMMER — silky placeholder while blob downloads
   ================================================================= */
.vtile-loading {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(244, 207, 99, 0.04) 0 1px,
      transparent 1px 14px),
    linear-gradient(180deg, rgba(16, 62, 84, 0.78), rgba(10, 40, 55, 0.92));
  overflow: hidden;
  z-index: 1;
}
.vtile-loading-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(247, 240, 219, 0.06) 48%,
    rgba(244, 207, 99, 0.18) 50%,
    rgba(247, 240, 219, 0.06) 52%,
    transparent 70%);
  transform: translateX(-100%);
  animation: vtileShimmer 2.2s cubic-bezier(0.4, 0.7, 0.4, 1) infinite;
}
@keyframes vtileShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.vtile-frame video { position: absolute; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .vtile-loading-shimmer { animation: none; }
}

/* =================================================================
   PREMIUM ANIMATION POLISH PASS
   ================================================================= */

/* drifting gold motes — site-wide ambient particles, perf-friendly */
.gold-motes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gold-mote {
  position: absolute;
  bottom: -10px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 207, 99, 0.85) 0%, rgba(244, 207, 99, 0) 70%);
  filter: blur(0.5px);
  opacity: 0;
  animation: moteDrift var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
}
@keyframes moteDrift {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  8%   { opacity: 0.6; }
  92%  { opacity: 0.5; }
  100% { transform: translate(var(--drift, 0), -110vh) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gold-motes { display: none; }
}

/* About portrait — slow Ken Burns when visible */
.about-portrait .portrait-img {
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.about-portrait.revealed .portrait-img {
  animation: portraitKenBurns 18s ease-in-out infinite alternate;
}
@keyframes portraitKenBurns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-portrait.revealed .portrait-img { animation: none; }
}

/* ============================================================
   About section — subtle, premium reveal overrides
   Replace the punchy left/right slides with a soft, slow
   fade + tiny lift + gentle blur. Staggered across portrait,
   heading, lede, body paragraphs, kicker.
   ============================================================ */
.about [data-reveal] {
  opacity: 0;
  transform: translateY(14px) translateX(0) scale(1);
  filter: blur(8px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about [data-reveal="left"],
.about [data-reveal="right"],
.about [data-reveal="scale"],
.about [data-reveal="fade"] {
  transform: translateY(14px);
}
.about [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Cascade copy paragraphs inside .about-copy so they don't all land at once */
.about-copy .script-title,
.about-copy .lede,
.about-copy p,
.about-copy .kicker {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-copy.revealed .script-title { transition-delay: 0.10s; }
.about-copy.revealed .lede         { transition-delay: 0.35s; }
.about-copy.revealed p:not(.lede):not(.kicker):nth-of-type(2) { transition-delay: 0.55s; }
.about-copy.revealed p:not(.lede):not(.kicker):nth-of-type(3) { transition-delay: 0.75s; }
.about-copy.revealed .kicker       { transition-delay: 0.95s; }
.about-copy.revealed .script-title,
.about-copy.revealed .lede,
.about-copy.revealed p,
.about-copy.revealed .kicker {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Portrait frame: soft scale-in + cream halo bloom on reveal */
.about-portrait .portrait-frame {
  transition:
    box-shadow 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-portrait .portrait-frame,
.about-portrait .portrait-img {
  transform: scale(1.02);
}
.about-portrait.revealed .portrait-frame {
  transform: scale(1);
}
.about-portrait .portrait-meta {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s,
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s,
    filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s;
}
.about-portrait.revealed .portrait-meta {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .about [data-reveal],
  .about-copy .script-title,
  .about-copy .lede,
  .about-copy p,
  .about-copy .kicker,
  .about-portrait .portrait-meta {
    transition: opacity 0.4s ease;
    filter: none;
    transform: none;
  }
}

/* Section labels — dash draws in left-to-right on reveal */
.section-label .dash {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].revealed .section-label .dash,
.section-label[data-revealed] .dash,
.revealed .section-label .dash {
  transform: scaleX(1);
}
/* fallback: always animate dash in when its containing section enters via the global reveal flow */
section.has-ambient .section-label .dash { animation: dashGrow 1.2s cubic-bezier(0.2,0.7,0.2,1) 0.3s both; }
@keyframes dashGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Services rows — richer hover: italic name shift + butter glow + arrow */
.services-table { position: relative; }
.srv-row {
  position: relative;
  cursor: default;
  transition:
    padding-left 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.4s ease;
}
.srv-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--butter);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.srv-row::after {
  content: "↗";
  position: absolute;
  right: 8px;
  top: 28px;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  color: var(--butter);
  opacity: 0;
  transform: translate(-8px, 4px) rotate(-20deg);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.srv-row:hover {
  padding-left: 28px;
  background: linear-gradient(90deg, rgba(244, 207, 99, 0.08), transparent 65%);
}
.srv-row:hover::before { transform: scaleY(1); }
.srv-row:hover::after {
  opacity: 0.85;
  transform: translate(0, 0) rotate(0deg);
}
.srv-row:hover .srv-name {
  color: var(--butter);
  font-style: italic;
  text-shadow: 0 0 24px rgba(244, 207, 99, 0.25);
}
.srv-row:hover .srv-num { color: var(--butter); }
.srv-name, .srv-num, .srv-desc {
  transition: color 0.4s ease, text-shadow 0.4s ease, font-style 0.4s ease;
}

@media (max-width: 720px) {
  .srv-row::after { display: none; }
}

/* Display number on services — italic Cormorant flourish bottom-right of section */
.services-mark {
  position: absolute;
  right: 6vw;
  bottom: 80px;
  font-family: "Pinyon Script", "Allura", cursive;
  font-size: clamp(96px, 14vw, 220px);
  line-height: 1;
  color: rgba(244, 207, 99, 0.12);
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 60px rgba(244, 207, 99, 0.18);
  z-index: 0;
}
@media (max-width: 720px) { .services-mark { display: none; } }

/* ============================================================
   FEATURED SERVICE — AI-Powered Content (always glowing)
   Sits above the numbered services grid.
   ============================================================ */
.srv-featured {
  position: relative;
  margin: 0 auto 96px;
  padding: clamp(40px, 4vw, 64px) clamp(28px, 4vw, 72px);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(244, 207, 99, 0.10), transparent 55%),
    radial-gradient(ellipse 80% 110% at 100% 100%, rgba(244, 207, 99, 0.08), transparent 60%),
    linear-gradient(160deg, rgba(247, 240, 219, 0.12) 0%, rgba(247, 240, 219, 0.05) 50%, rgba(244, 207, 99, 0.08) 100%);
  /* Frosted glass — stronger, matching contact section */
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(244, 207, 99, 0.32);
  box-shadow:
    0 0 0 1px rgba(244, 207, 99, 0.10),
    0 0 56px -10px rgba(244, 207, 99, 0.35),
    0 0 140px -30px rgba(244, 207, 99, 0.22),
    inset 0 0 60px -10px rgba(244, 207, 99, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  isolation: isolate;
  z-index: 1;
}
.srv-featured.in {
  opacity: 1;
  transform: translateY(0);
  animation: srvFeaturedBreath 5.5s ease-in-out 1s infinite;
}
@keyframes srvFeaturedBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(244, 207, 99, 0.14),
      0 0 56px -10px rgba(244, 207, 99, 0.40),
      0 0 140px -30px rgba(244, 207, 99, 0.28),
      inset 0 0 60px -10px rgba(244, 207, 99, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(244, 207, 99, 0.26),
      0 0 80px -10px rgba(244, 207, 99, 0.60),
      0 0 200px -30px rgba(244, 207, 99, 0.42),
      inset 0 0 90px -10px rgba(244, 207, 99, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  }
}

/* Rotating conic-gradient gold border — DISABLED per request.
   The featured card still has its breathing outer halo, inner drift glow,
   sparkles and corner ornaments. */
.srv-featured-aura { display: none !important; }

/* Soft inner gold light, slowly drifting */
.srv-featured-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle 30% 40% at var(--gx, 25%) var(--gy, 30%), rgba(244, 207, 99, 0.18), transparent 60%);
  animation: srvInnerDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes srvInnerDrift {
  0%   { --gx: 20%; --gy: 30%; opacity: 0.7; }
  50%  { --gx: 70%; --gy: 60%; opacity: 1.0; }
  100% { --gx: 35%; --gy: 80%; opacity: 0.8; }
}
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 25%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

/* Drifting sparkle particles */
.srv-featured-sparks {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.srv-featured-spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(247, 240, 219, 0.85);
  box-shadow:
    0 0 4px rgba(244, 207, 99, 0.9),
    0 0 12px rgba(244, 207, 99, 0.55);
  opacity: 0;
  animation: srvSparkFloat var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes srvSparkFloat {
  0%, 100% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
  35%      { opacity: 0.9; transform: translate(2px, -2px) scale(1); }
  65%      { opacity: 0.7; transform: translate(-2px, -6px) scale(0.9); }
}

/* Ornament corners */
.srv-featured-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(244, 207, 99, 0.55);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.srv-featured.in .srv-featured-corner {
  opacity: 1;
  transition: opacity 0.7s ease 0.6s;
}
.srv-featured-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.srv-featured-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.srv-featured-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.srv-featured-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.srv-featured-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 880px) {
  .srv-featured-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Left meta column */
.srv-featured-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.srv-featured-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--butter);
  padding: 8px 14px;
  border: 1px solid rgba(244, 207, 99, 0.45);
  border-radius: 100px;
  background: rgba(244, 207, 99, 0.06);
  box-shadow: 0 0 18px -4px rgba(244, 207, 99, 0.35);
  align-self: flex-start;
}
.srv-featured-stamp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 8px rgba(244, 207, 99, 0.95);
  animation: stampPulse 2.6s ease-in-out infinite;
}
.srv-featured-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(96px, 11vw, 168px);
  line-height: 0.9;
  color: var(--butter);
  text-shadow:
    0 0 22px rgba(244, 207, 99, 0.55),
    0 0 60px rgba(244, 207, 99, 0.30);
  letter-spacing: -0.02em;
  margin: -10px 0 -8px;
  user-select: none;
  animation: srvMarkBob 6s ease-in-out infinite;
}
@keyframes srvMarkBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.srv-featured-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(244, 207, 99, 0.22);
  padding-top: 18px;
}
.srv-featured-pillars li {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  color: var(--cream);
  line-height: 1.2;
}
.srv-featured-pillars li em {
  font-style: italic;
  color: var(--butter-soft);
}
.srv-featured-pillar-bullet {
  color: rgba(244, 207, 99, 0.55);
  margin-right: 6px;
}

/* Right body column */
.srv-featured-body { min-width: 0; }
.srv-featured-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--butter-soft);
  margin: 4px 0 18px;
}
.srv-featured-eyebrow-rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(244, 207, 99, 0.45), transparent);
}
.srv-featured-eyebrow > span:nth-child(2) { flex: 0 0 auto; }

.srv-featured-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 24px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}
.srv-featured-name em {
  font-style: italic;
  color: var(--butter);
  text-shadow:
    0 0 28px rgba(244, 207, 99, 0.55),
    0 0 60px rgba(244, 207, 99, 0.30);
}
.srv-featured-lede {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: rgba(247, 240, 219, 0.95);
  margin: 0 0 20px;
  max-width: 60ch;
  text-wrap: pretty;
}
.srv-featured-copy {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(247, 240, 219, 0.80);
  margin: 0 0 28px;
  max-width: 65ch;
  text-wrap: pretty;
}
.srv-featured-copy em {
  font-style: italic;
  color: var(--butter-soft);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12em;
}
.srv-featured-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--butter);
  padding: 12px 18px;
  border: 1px solid rgba(244, 207, 99, 0.28);
  border-radius: 100px;
  background: rgba(244, 207, 99, 0.04);
}
.srv-featured-tag-dot { color: rgba(244, 207, 99, 0.55); }

/* Reveal cascade for the inner content */
.srv-featured-stamp,
.srv-featured-mark,
.srv-featured-pillars,
.srv-featured-eyebrow,
.srv-featured-name,
.srv-featured-lede,
.srv-featured-copy,
.srv-featured-tags {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}
.srv-featured.in .srv-featured-stamp   { animation: srvFeatIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.20s forwards; }
.srv-featured.in .srv-featured-mark    { animation: srvFeatIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s forwards; }
.srv-featured.in .srv-featured-pillars { animation: srvFeatIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s forwards; }
.srv-featured.in .srv-featured-eyebrow { animation: srvFeatIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards; }
.srv-featured.in .srv-featured-name    { animation: srvFeatIn 1.0s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s forwards; }
.srv-featured.in .srv-featured-lede    { animation: srvFeatIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.70s forwards; }
.srv-featured.in .srv-featured-copy    { animation: srvFeatIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.90s forwards; }
.srv-featured.in .srv-featured-tags    { animation: srvFeatIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.10s forwards; }
@keyframes srvFeatIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============================================================
   SERVICES GRID — 11 numbered cells in 2 columns
   Each cell only glows when hovered.
   ============================================================ */
.srv-grid-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--butter-soft);
  margin: 56px auto 36px;
  opacity: 0.85;
}
.srv-grid-eyebrow-rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(247, 240, 219, 0.30), transparent);
}
.srv-grid-eyebrow > span:nth-child(2) { flex: 0 0 auto; }

.services-grid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(20px, 2.5vw, 32px);
  row-gap: clamp(14px, 1.6vw, 20px);
  border-top: none;
}
@media (max-width: 880px) {
  .services-grid-list { grid-template-columns: 1fr; }
}

.srv-cell {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 8px;
  padding: 26px 24px 26px 22px;
  border-radius: 14px;
  cursor: default;
  opacity: 0;
  transform: translateY(16px) translateZ(0);
  filter: blur(6px);
  /* Frosted glass — stronger, matching contact section */
  background: linear-gradient(160deg, rgba(247, 240, 219, 0.10) 0%, rgba(247, 240, 219, 0.05) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(247, 240, 219, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transition:
    color 0.4s ease,
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.services-grid-list.in .srv-cell {
  animation: srvCellIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes srvCellIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.srv-cell-num {
  grid-row: 1 / 3;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: rgba(244, 207, 99, 0.7);
  padding-top: 6px;
  transition: color 0.35s, text-shadow 0.35s;
}
.srv-cell-name {
  grid-column: 2;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.15;
  color: var(--butter);
  margin: 0;
  transition: text-shadow 0.35s;
}
.srv-cell-desc {
  grid-column: 2;
  font-family: "Inter", sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(247, 240, 219, 0.86);
  margin: 0;
  max-width: 52ch;
  transition: color 0.4s;
}
.srv-cell-rule {
  display: none;
}
.services-grid-list.in .srv-cell-rule {
  animation: none;
}
@keyframes srvCellRuleIn {
  to { transform: scaleX(1); }
}

/* On-hover glow halo (the cell becomes "alive") */
.srv-cell-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 110% at 0% 50%, rgba(244, 207, 99, 0.16), transparent 65%),
    linear-gradient(135deg, rgba(244, 207, 99, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: -1;
}
.srv-cell:hover {
  background: linear-gradient(160deg, rgba(247, 240, 219, 0.06) 0%, rgba(247, 240, 219, 0.025) 100%);
  border-color: rgba(244, 207, 99, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(247, 240, 219, 0.12),
    0 8px 30px -10px rgba(244, 207, 99, 0.25),
    0 0 50px -10px rgba(244, 207, 99, 0.18);
  transform: translateY(-2px);
}
.srv-cell:hover .srv-cell-glow {
  opacity: 1;
}
.srv-cell:hover .srv-cell-name {
  text-shadow: 0 0 22px rgba(244, 207, 99, 0.35);
}
.srv-cell:hover .srv-cell-num {
  color: var(--butter);
  text-shadow: 0 0 12px rgba(244, 207, 99, 0.45);
}
.srv-cell:hover .srv-cell-desc {
  color: rgba(247, 240, 219, 0.92);
}

/* Vertical separator removed — cells are now distinct glass tiles */
@media (min-width: 881px) {
  .srv-cell:nth-child(odd)::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .srv-cell { grid-template-columns: 32px 1fr; column-gap: 12px; padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .srv-featured,
  .srv-featured.in,
  .srv-featured-aura,
  .srv-featured-inner-glow,
  .srv-featured-mark,
  .srv-featured-spark {
    animation: none !important;
  }
  .srv-featured.in .srv-featured-aura { opacity: 0.6; }
}

.toolkit-parallax {
  padding: 0 !important;
  max-width: none;
  width: 100%;
  position: relative;
}

/* ============================================================================
   TOOLKIT PARALLAX v4 — EXACT-MOCKUP frame.
   Every postcard/product is placed by its CENTER (inline left/top %) inside a
   fixed-aspect .tk-frame (2456 x 1467). The frame is letterboxed to fit any
   viewport, so the composition (alignment + ratio) is pixel-identical at every
   size. Items emerge FROM the bag (translate by --dx/--dy in container units)
   and settle into their exact spots. Static fallback = the settled layout.
   ============================================================================ */
/* (.tk-track wrapper removed — emergence is now scroll-TRIGGERED, not scrubbed) */
.tk-stage {
  position: relative;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: visible;
  isolation: isolate;
}
/* seam handoff: the water stays clear around the bag and only BEGINS to deepen
   just below it — the long resolve to solid teal happens in .seam-into below,
   so there's no visible band here and no hard line. The bottom alpha (0.22)
   matches .seam-into's top alpha exactly, so the boundary is invisible. */
.tk-stage::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 84%,
    rgba(16, 62, 84, 0.09) 92%,
    rgba(16, 62, 84, 0.22) 100%);
}
/* lighter, clearer toolkit water — fades to nothing (no seam, no hard edge) */
.toolkit-parallax .ambient-veil {
  background: linear-gradient(180deg,
    rgba(16, 62, 84, 0.40) 0%,
    rgba(16, 62, 84, 0.14) 12%,
    rgba(16, 62, 84, 0.10) 64%,
    rgba(16, 62, 84, 0) 100%);
}

/* ---- the aspect-locked composition frame ---- */
.tk-frame {
  position: relative;
  aspect-ratio: 2456 / 1467;
  width: min(96vw, 158svh);          /* letterboxed: fits width AND height */
  container-type: size;              /* enables cqw/cqh for emergence vectors */
  z-index: 2;
}

/* ---- header: a fading overlay; greets you, lifts away as tools emerge,
   and returns when you scroll back up ---- */
.toolkit-parallax .sk-head {
  position: absolute; left: 50%; top: clamp(10px, 4vh, 46px);
  transform: translateX(-50%);
  text-align: center; max-width: 1000px; width: 92vw;
  z-index: 7; pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.toolkit-parallax .sk-head .section-label {
  justify-content: center; color: rgba(244,207,99,0.85);
  letter-spacing: 0.42em; font-size: 12px; margin-bottom: clamp(8px,1.6vh,18px);
}
.toolkit-parallax .sk-title {
  font-size: clamp(48px,7.5vw,118px) !important; line-height: 0.94 !important;
  margin: 0 !important; letter-spacing: -0.02em;
  color: var(--cream) !important; text-shadow: 0 0 60px rgba(244,207,99,0.22);
}
.toolkit-parallax .sk-title::after {
  content:""; display:block; width:96px; height:1px; margin: clamp(10px,1.8vh,18px) auto 0;
  background: linear-gradient(90deg, transparent, rgba(244,207,99,0.85), transparent);
}

/* ---- bag: positioned by its center inside the frame ---- */
.tk-bag-wrap {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 5; will-change: transform;
}
.tk-bag {
  position: relative; z-index: 3; display:block; width:100%; height:auto;
  filter:
    drop-shadow(0 14px 22px rgba(8,26,38,0.42))
    drop-shadow(0 30px 48px rgba(8,26,38,0.5))
    drop-shadow(0 0 28px rgba(244,207,99,0.06));
  transform-origin: 50% 78%;
}
.tk-bag-glow {
  position:absolute; inset:-42% -52%; z-index:0;
  background: radial-gradient(ellipse at 50% 52%,
    rgba(244,207,99,0.24) 0%, rgba(244,207,99,0.10) 32%, rgba(244,207,99,0.03) 54%, transparent 72%);
  filter: blur(10px); pointer-events:none; opacity:0.95; mix-blend-mode:screen;
}

/* ---- each item (postcard or product): center-anchored, sized by frame width ----
   Default = hidden, tucked inside the bag mouth (the start of the emerge keyframe).
   It travels OUT of the bag (tkEmerge) when .tk-out is set, and back INTO the bag
   (tkRetract) when .tk-in is set. Keyframe animations are used (not transitions)
   because they reliably interpolate the container-unit (cqw/cqh) bag-origin offset
   — so each item visibly flies out of / into the bag rather than popping in place. */
.tk-item {
  position: absolute;
  transform: translate(-50%, -50%)
    translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh))
    scale(0.12) rotate(0deg);
  opacity: 0;
  transform-origin: 50% 50%; will-change: transform, opacity;
  z-index: 3;
}
.tk-card { z-index: 4; }              /* postcards are the hero — above products */
.tk-prod { z-index: 3; }
.tk-item img {
  display:block; width:100%; height:auto;
  animation: tkFloat ease-in-out infinite;
  animation-duration: calc(7s + var(--i) * 0.37s);
  animation-delay: calc(var(--i) * -0.5s);
  transition: filter 0.35s ease;
}
.tk-card img {
  filter: drop-shadow(0 7px 12px rgba(8,26,38,0.30)) drop-shadow(0 16px 26px rgba(8,26,38,0.42));
}
.tk-prod img {
  filter: drop-shadow(0 6px 11px rgba(8,26,38,0.30)) drop-shadow(0 14px 24px rgba(8,26,38,0.40));
}
.tk-item:hover img {
  filter: drop-shadow(0 8px 14px rgba(8,26,38,0.34)) drop-shadow(0 0 16px rgba(255,255,255,0.7));
}
@keyframes tkFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ---- emergence: fly straight OUT of the bag to the exact resting spot ----
   --dx/--dy are (bag_center - item_center) in PERCENT of the frame; 1cqw/1cqh
   == 1% of the frame, so the item starts exactly at the bag mouth, tiny, then
   travels in ONE smooth, direct path to its resting place (no mid-waypoint).
   Both transform keyframes keep the SAME function list (translate translate
   scale rotate) so the browser interpolates a single clean glide. */
@keyframes tkEmerge {
  0%   { opacity:0; transform: translate(-50%,-50%)
           translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh))
           scale(0.12) rotate(0deg); }
  22%  { opacity:1; }
  100% { opacity:1; transform: translate(-50%,-50%)
           translate(0px, 0px) scale(1) rotate(var(--rot)); }
}
/* ---- retract: reverse — glide straight from the resting spot back INTO the bag ---- */
@keyframes tkRetract {
  0%   { opacity:1; transform: translate(-50%,-50%)
           translate(0px, 0px) scale(1) rotate(var(--rot)); }
  78%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%)
           translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh))
           scale(0.12) rotate(0deg); }
}

/* ---- scroll-GATED play (JS toggles .tk-out / .tk-in on .tk-stage) ----
   .tk-out → tools spill OUT of the bag (staggered).  .tk-in → glide back IN.
   `both` fill holds the end state, so after OUT they rest settled and after IN
   they rest hidden in the bag. */
.tk-stage.tk-out .tk-item {
  animation: tkEmerge 0.95s cubic-bezier(0.16, 0.85, 0.3, 1) both;  /* smooth glide, eases to a soft stop */
  animation-delay: calc(var(--i) * 0.03s);    /* staggered spill, ~1.45s total */
}
.tk-stage.tk-in .tk-item {
  animation: tkRetract 0.75s cubic-bezier(0.5, 0, 0.4, 1) both;     /* smooth glide back in */
  animation-delay: calc(var(--i) * 0.025s);   /* ~1.15s total */
}
/* the title greets you, then lifts away as the tools take over (returns on retract) */
.toolkit-parallax .sk-head { transition: opacity 0.5s ease, transform 0.5s ease; }
.tk-stage.tk-out .sk-head { opacity: 0; transform: translateX(-50%) translateY(-14px); }
.tk-stage.tk-in  .sk-head { opacity: 1; }

/* footer hidden so nothing reads as a horizontal divider under the bag */
.toolkit-parallax .sk-foot { display:none; }

/* ---- mobile: same ratio + alignment, scaled down (letterboxed band) ---- */
@media (max-width: 760px) {
  .tk-frame { width: min(98vw, 150svh); }
  .toolkit-parallax .sk-title { font-size: clamp(38px,10vw,60px) !important; }
}

/* ---- reduced motion: skip the fly-out, show the settled composition ---- */
@media (prefers-reduced-motion: reduce) {
  .tk-stage.tk-out .tk-item {
    animation: none !important; opacity: 1;
    transform: translate(-50%,-50%) rotate(var(--rot));
  }
  .tk-stage.tk-in .tk-item { animation: none !important; opacity: 0; }
  .tk-item img { animation: none !important; }
  .tk-bag-glow { opacity: 0.95; }
  .tk-stage.tk-out .sk-head { opacity: 0; }   /* title would overlap the settled top row */
}

/* ---- Suppress old toolkit components (unused but DOM-free; safety net) ---- */
.sk-strip, .sk-chip, .sk-spec, .sk-pond, .sk-lily, .sk-bar,
.sk-vault, .sk-credits, .sk-orbit, .sk-spread, .sk-idx, .atl {
  display: none !important;
}