/* ============================================================
   KRY PORTFOLIO — External Stylesheet
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --color-ivory:          #faf6ed;
  --color-black:          #404040;
  --color-darkest-gray:   #4e4e4e;
  --color-dark-gray:      #bfbfbf;
  --color-light-gray:     #e7e7e7;
  --color-ivory-border:   #e8e0d0;
  --color-warm-brown:     #7a7060;
  --color-dark-espresso:  #2a2318;
  --color-lilac-surface:  #f0edf8;
  --color-lilac-tint:     #ebe8fa;
  --color-lilac-main:     #ddd8ee;
  --color-soft-lavender:  #b5b0c8;
  --color-muted-purple:   #6b668a;
  --color-mid-purple:     #6060a0;
  --color-deep-purple:    #484870;
  --color-near-black:     #2c2b3a;
  --shadow-kry:    0px 4px 18.3px 0px rgba(191, 191, 191, 0.41);
  --shadow-refine: 0px 4px 18.3px 0px rgba(78,  78,  78,  0.41);
  --radius-pill: 999px;
  --radius-24:   24px;
  --radius-20:   20px;
  --radius-18:   18px;
}


/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; overflow-x: hidden; }
body  {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--color-ivory);
  color: var(--color-black);
  overflow-x: hidden;
  width: 100%;
}


/* ── Keyframes ──────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes floatA {
  0%, 100% { transform: translateY(0px) rotate(-6deg); }
  50%       { transform: translateY(-18px) rotate(-6deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0px) rotate(4deg); }
  50%       { transform: translateY(-12px) rotate(4deg); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.25; transform: scale(0.65) rotate(20deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
@keyframes cardFlyOff {
  0%   { transform: rotate(2deg) translate(0, 0) scale(1);          opacity: 1; }
  35%  { transform: rotate(-4deg) translate(-18px, -55px) scale(1.04); opacity: 0.85; }
  100% { transform: rotate(-16deg) translate(-55px, -200px) scale(0.82); opacity: 0; }
}


/* ── Navigation ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem 1.5rem 0.5rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .site-header { padding-left: 3.5rem; padding-right: 3.5rem; }
}

.nav-wrapper { width: 100%; pointer-events: auto; }

.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  border-radius: var(--radius-pill);
  background: rgba(80, 76, 110, 0.32);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 24px rgba(20, 18, 40, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (min-width: 1025px) {
  .nav-pill { padding-left: 3.5rem; padding-right: 3.5rem; }
}

.nav-socials { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 1024px) {
  .nav-socials { display: none; }
  .nav-divider { display: none; }
  .nav-pill { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav-links { margin-left: auto; }
}

.nav-social-link { flex-shrink: 0; transition: transform 0.2s ease; }
.nav-social-link:hover { transform: scale(1.1); }

.nav-social-icon { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }

.nav-divider {
  display: inline-block;
  width: 1px; height: 1.25rem;
  background: rgba(255,255,255,0.20);
  margin: 0 0.25rem;
}

.nav-email {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Rethink Sans', sans-serif;
}
.nav-email:hover { color: rgba(255,255,255,1); }
@media (min-width: 1025px) { .nav-email { display: flex; } }

.nav-copy-icon { opacity: 0.35; transition: opacity 0.2s ease; }
.nav-email:hover .nav-copy-icon { opacity: 0.8; }

.email-tooltip {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  background: var(--color-near-black);
  color: var(--color-ivory);
  font-size: 10px;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
}

.nav-logo-wrap { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-logo-img  { height: 4rem; width: auto; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 1025px) { .nav-links { gap: 2rem; } }

.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-link:hover { color: rgba(255,255,255,1); }

.nav-link--desktop { display: none; }
@media (min-width: 1025px) { .nav-link--desktop { display: block; } }
.nav-link--active { color: rgba(255,255,255,1); font-weight: 600; }

.nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.80);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s ease;
}
.nav-hamburger:hover { color: rgba(255,255,255,1); }
@media (min-width: 1025px) { .nav-hamburger { display: none; } }


/* ══════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY
══════════════════════════════════════════════════════════ */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* display controlled entirely by JS via style.display */
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 10, 0.6);
  cursor: pointer;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100vw, 420px);
  height: 100%;
  background: var(--color-dark-espresso);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem 3rem;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Close (X) button */
.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(250,246,237,0.65);
  padding: 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close:hover {
  color: var(--color-ivory);
  transform: rotate(90deg);
}

/* Stacked nav links */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0 2rem;
}

.mobile-nav-link {
  font-family: 'Parisienne', cursive;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 400;
  color: rgba(250, 246, 237, 0.75);
  text-decoration: none;
  line-height: 1.25;
  transition: color 0.2s ease;
  text-align: center;
}
.mobile-nav-link:hover { color: var(--color-ivory); }

/* Small tag below each link */
.mobile-nav-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(250,246,237,0.12);
  margin: 0.5rem 0;
}

/* Bottom socials row */
.mobile-nav-footer {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mobile-nav-social {
  opacity: 0.60;
  transition: opacity 0.2s ease;
}
.mobile-nav-social:hover { opacity: 1; }
.mobile-nav-social img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* Email row inside overlay */
.mobile-nav-email-row {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.mobile-nav-email-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  color: rgba(250,246,237,0.65);
  font-family: 'Rethink Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}
.mobile-nav-email-btn:hover { background: rgba(255,255,255,0.14); color: var(--color-ivory); }

/* Eyebrow label inside overlay */
.mobile-nav-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,246,237,0.28);
  margin-bottom: 2rem;
}


/* ── Hero ───────────────────────────────────────────────── */
.hero-bg {
  background-image: url('../images/hero-section/hero-gradient-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#hero {
  min-height: 100dvh;
  min-height: 100vh;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: clamp(5rem, 10vh, 7rem);
  padding-bottom: 2.5rem;
  box-sizing: border-box;
  overflow: visible;
}

.hero-main {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.25rem;
  position: relative;
  z-index: 10;
  gap: 0.4rem;
}

.hero-ctas {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* Shared deco base */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.deco--desktop { display: none; }
@media (min-width: 768px) { .deco--desktop { display: block; } }

.deco-clip {
  top: 20%; left: 10%;
  width: clamp(100px, 10vw, 145px);
  transform: rotate(-14deg);
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.30));
  animation: floatA 5s ease-in-out infinite;
}
.deco-letters {
  bottom: 18%; left: 8%;
  width: clamp(130px, 13vw, 185px);
  transform: rotate(6deg);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.22));
  animation: floatB 7s ease-in-out infinite;
}
.deco-locket {
  top: 20%; right: 6%;
  width: clamp(180px, 20vw, 270px);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
  animation: floatC 6s ease-in-out infinite;
}
.deco-camera {
  bottom: 22%; right: 10%;
  width: clamp(110px, 11vw, 155px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.25));
  animation: floatA 6.5s ease-in-out infinite;
}

.star, .sparkle-dot {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.star { opacity: 0.75; }
.star-1 { top: 52%; left: 4%;  width: clamp(70px, 8vw, 110px); animation: sparkle 3.2s ease-in-out infinite; }
.star-2 { top: 70%; left: 1%;  width: clamp(48px, 5.5vw, 76px); animation: sparkle 2.8s ease-in-out infinite 0.9s; }
.star-3 { top: 14%; left: 7%;  width: clamp(28px, 3vw, 44px); opacity: 0.55; animation: sparkle 3.6s ease-in-out infinite 1.4s; }
.star-4 { top: 9%;  right: 7%; width: clamp(24px, 2.5vw, 38px); opacity: 0.50; animation: sparkle 4.0s ease-in-out infinite 0.5s; }

.sparkle-dot { filter: brightness(0) invert(1); }
.sparkle-dot-1 { top: 6%;  left: 11%;  width: clamp(60px, 7vw, 96px);  opacity: 0.88; animation: sparkle 2.4s ease-in-out infinite; }
.sparkle-dot-2 { top: 38%; left: 14%;  width: clamp(28px, 3.5vw, 48px); opacity: 0.60; animation: sparkle 3.1s ease-in-out infinite 0.8s; }
.sparkle-dot-3 { top: 5%;  right: 16%; width: clamp(60px, 7vw, 90px);  opacity: 0.82; animation: sparkle 2.8s ease-in-out infinite 0.4s; }
.sparkle-dot-4 { top: 34%; right: 28%; width: clamp(22px, 2.5vw, 36px); opacity: 0.52; animation: sparkle 3.5s ease-in-out infinite 1.2s; }
.sparkle-dot-5 { bottom: 28%; left: 20%;  width: clamp(20px, 2.5vw, 32px); opacity: 0.48; animation: sparkle 2.2s ease-in-out infinite 1.6s; }
.sparkle-dot-6 { bottom: 20%; right: 18%; width: clamp(32px, 4vw, 52px);  opacity: 0.58; animation: sparkle 3.0s ease-in-out infinite 0.6s; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--color-dark-espresso);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}
.hero-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.hero-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  padding-top: 0.5rem;
}

/* h1 puts design + portfolio on the same line */
.hero-heading-group h1 {
  margin-top: 4rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9em;
  line-height: 1;
}

.hero-intro {
  position: absolute;
  top: 0.3rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(12px, 2.5vw, 30px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}

.hero-handwriting {
  height: clamp(3.5rem, 8vw, 6.5rem);
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  filter: none;
  position: relative;
  top: 4px;
}

/* "design" — Rethink Sans semibold, purple */
.hero-design {
  display: inline-block;
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  color: var(--color-mid-purple);
}

/* "portfolio" — Rethink Sans regular */
.hero-portfolio {
  display: inline-block;
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-near-black);
}

/* Rounded dashed divider via SVG background */
.hero-divider {
  width: min(96%, 820px);
  height: 5px;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='5'%3E%3Cline x1='2.5' y1='2.5' x2='19.5' y2='2.5' stroke='rgba(96%2C96%2C160%2C0.55)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  margin: 1.75rem auto 0.75rem;
}

.hero-desc {
  max-width: 620px;
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  color: var(--color-darkest-gray);
  line-height: 1.75;
  margin-top: 0.6rem;
  text-align: center;
}
.hero-desc em { font-style: italic; color: var(--color-deep-purple); font-weight: 600; }

.btn-warm-brown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem clamp(1.5rem, 6vw, 4rem);
  min-width: min(240px, 100%);
  justify-content: center;
  border-radius: var(--radius-pill);
  text-decoration: none;
  background: var(--color-warm-brown);
  color: var(--color-ivory);
  border: none;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn-warm-brown:hover { background: #6a6050; transform: translateY(-1px); }

.cv-on-request {
  font-size: 0.9rem;
  color: var(--color-muted, #888);
  font-style: italic;
  align-self: center;
}

.hero-stats {
  width: 100%;
  padding: 0 1.5rem;
  margin-top: 3.5rem;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.hero-stats-inner {
  background: rgba(28, 26, 40, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.4rem 2.5rem;
  width: 100%;
  max-width: 980px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.50); order: 1;
}
.hero-stat-number,
.hero-stat-number--location {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800; font-size: 1.9rem;
  color: #ffffff; line-height: 1.05; order: 2;
}
.hero-stat-sub { font-size: 9.5px; color: rgba(255,255,255,0.38); line-height: 1.4; order: 3; }

@media (max-width: 1023px) {
  .deco-locket  { width: clamp(150px, 18vw, 220px); top: 14%; }
  .deco-clip    { width: clamp(80px, 10vw, 130px); }
  .deco-letters { width: clamp(100px, 11vw, 160px); }
  .deco-camera  { width: clamp(90px, 10vw, 130px); }
  .star-1 { width: clamp(55px, 7vw, 90px); }
  .star-2 { width: clamp(38px, 4.5vw, 60px); }
}
@media (max-width: 767px) {
  .deco-locket { top: 8%; right: 1%; width: clamp(120px, 30vw, 180px); }
  .star-1      { top: 50%; left: 2%; width: 56px; }
  .star-2      { display: none; }
  .hero-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 28px;
    padding: 1rem 1.25rem;
    gap: 0;
  }
  .hero-stat {
    border-right: none;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    align-items: center;
    text-align: center;
  }
  .hero-stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,0.08); }
  .hero-stat:nth-child(3),
  .hero-stat:nth-child(4)    { border-bottom: none; }
  .hero-stat-number, .hero-stat-number--location { font-size: 1.5rem; }
}

/* Short viewports — tighten spacing */
@media (max-height: 700px) {
  #hero { padding-top: 4rem; padding-bottom: 1.5rem; }
  .hero-heading-group h1 { margin-top: 3rem; }
  .hero-stats { margin-top: 1rem; }
  .hero-stats-inner { padding: 0.75rem 1.5rem; }
}


/* ── Eyebrow & Section heading ──────────────────────────── */
.eyebrow {
  font-family: 'Rethink Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-muted-purple);
  display: block;
  text-align: center;
  margin-bottom: 1.25rem;
}
.eyebrow--light { color: rgba(181,176,200,0.60); }

.section-heading {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800;
  line-height: 1.15;
}

/* ── Marquee ────────────────────────────────────────────── */
.marquee-band {
  background: var(--color-lilac-main);
  overflow: hidden;
  padding: 0.85rem 0;
}
.marquee-inner {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-word {
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-mid-purple);
  padding: 0 1.25rem;
  white-space: nowrap;
}
.marquee-star { width: 14px; height: 14px; object-fit: contain; opacity: 0.7; flex-shrink: 0; }


/* ── KRY Framework ──────────────────────────────────────── */
.framework-section {
  background: var(--color-lilac-surface);
  padding: 5rem clamp(1.5rem, 6vw, 6rem) 8rem;
  width: 100%;
  box-sizing: border-box;
}
.framework-heading {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: var(--color-near-black);
  margin-bottom: 0.75rem;
  line-height: 1.18;
}
.framework-heading-accent { color: var(--color-mid-purple); }
.framework-subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted-purple);
  margin-bottom: 3rem;
  white-space: normal;
}
.framework-hint {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(107,102,138,0.60);
  margin-top: 1.5rem;
  font-style: italic;
}

.kry-panels {
  display: flex;
  flex-direction: row;
  gap: 12px;
  min-height: 440px;
  max-width: 960px;
  margin: 0 auto;
}
.kry-panel {
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: flex 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.kry-panel.active  { flex: 6 1 0%; max-width: 1000px; }
.kry-panel.compact { flex: 1 1 0%; min-width: 80px; max-width: 115px; }

.kry-panel .panel-letter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0;
  opacity: 1;
  transition: opacity 0.3s ease 0.05s;
  pointer-events: none;
}
.kry-panel.active .panel-letter { opacity: 0; pointer-events: none; }

.panel-compact-letter {
  font-family: 'Parisienne', cursive;
  font-size: 3.8rem;
  line-height: 1;
  writing-mode: horizontal-tb;
}
.panel-compact-label {
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.65;
}

.kry-panel .panel-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: row;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.5s;
}
.kry-panel.active .panel-content { opacity: 1; pointer-events: auto; }

.panel-body {
  flex: 1; padding: 2rem 2.2rem;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0.5rem;
}
.panel-step { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.2rem; }
.panel-title { font-family: 'Parisienne', cursive; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; margin-bottom: 0.1rem; }
.panel-subtitle { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.75rem; }
.panel-desc { font-size: 0.82rem; line-height: 1.7; max-width: 280px; margin-bottom: 1rem; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-tag { font-size: 9.5px; font-weight: 500; padding: 3px 11px; border-radius: var(--radius-pill); }

.panel-visual {
  width: 52%; flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.panel-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

#panel-k { background: var(--color-ivory); box-shadow: var(--shadow-kry); }
#panel-k .panel-compact-label  { color: var(--color-muted-purple); }
#panel-k .panel-compact-letter { color: var(--color-deep-purple); }
#panel-k .panel-step     { color: var(--color-muted-purple); }
#panel-k .panel-title    { color: var(--color-near-black); }
#panel-k .panel-subtitle { color: var(--color-soft-lavender); }
#panel-k .panel-desc     { color: var(--color-darkest-gray); }
#panel-k .panel-tag      { background: var(--color-lilac-main); color: var(--color-deep-purple); }


#panel-r { background: var(--color-warm-brown); }
#panel-r .panel-compact-label  { color: rgba(250,246,237,0.55); }
#panel-r .panel-compact-letter { color: rgba(250,246,237,0.75); }
#panel-r .panel-step     { color: rgba(250,246,237,0.55); }
#panel-r .panel-title    { color: var(--color-ivory); }
#panel-r .panel-subtitle { color: rgba(250,246,237,0.45); }
#panel-r .panel-desc     { color: rgba(250,246,237,0.80); }
#panel-r .panel-tag      { background: rgba(255,255,255,0.15); color: var(--color-ivory); }


#panel-y { background: var(--color-near-black); }
#panel-y .panel-visual { width: 58%; }
#panel-y .panel-visual-img { object-fit: cover; object-position: left top; }
#panel-y .panel-compact-label  { color: rgba(250,246,237,0.45); }
#panel-y .panel-compact-letter { color: rgba(250,246,237,0.65); }
#panel-y .panel-step     { color: rgba(250,246,237,0.50); }
#panel-y .panel-title    { color: var(--color-ivory); }
#panel-y .panel-subtitle { color: rgba(250,246,237,0.40); }
#panel-y .panel-desc     { color: rgba(250,246,237,0.75); }
#panel-y .panel-tag      { background: rgba(255,255,255,0.12); color: var(--color-ivory); }


@media (max-width: 767px) {
  .framework-section { padding: 3rem 1rem 5rem; }
  .framework-subtitle { white-space: normal; }

  /* ── Vertical column stack ── */
  .kry-panels {
    flex-direction: column;
    min-height: auto;
    max-width: 100%;
    gap: 8px;
  }

  /* All panels: full width; animate height instead of flex/max-width */
  .kry-panel {
    flex: none !important;
    width: 100%;
    min-width: 100%;
    max-width: 100% !important;
    transition: height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Compact — collapsed header strip */
  .kry-panel.compact { height: 64px; }

  /* Active — expanded card */
  .kry-panel.active  { height: 360px; }

  /* Compact: show letter + label centred in the strip */
  .kry-panel.compact .panel-letter {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0.75rem;
  }

  /* Horizontal letter & label inside the strip */
  .panel-compact-letter {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 1.8rem;
    line-height: 1;
    display: block;
  }
  .panel-compact-label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 9px;
    letter-spacing: 0.2em;
    opacity: 0.65;
    display: block;
  }

  /* Active panel: text on top, image on bottom */
  .kry-panel.active .panel-content { flex-direction: column; }

  .panel-body {
    flex: 1;
    padding: 1.25rem 1.1rem 0.5rem;
    gap: 0.3rem;
    justify-content: flex-start;
  }

  /* Image fills the bottom of the card */
  .panel-visual {
    display: block !important;
    width: 100% !important;
    height: 130px;
    flex-shrink: 0;
  }

  .panel-step     { font-size: 8px; }
  .panel-title    { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .panel-subtitle { display: none; }
  .panel-desc     { font-size: 0.7rem; line-height: 1.6; max-width: 100%; margin-bottom: 0.3rem; }
  .panel-tags     { gap: 3px; flex-wrap: wrap; }
  .panel-tag      { font-size: 8px; padding: 2px 8px; }
}


/* ── Blueprint / Featured Works ─────────────────────────── */
.blueprint-section {
  background: var(--color-ivory);
  position: relative;
  overflow: visible;
  padding: 5rem 5rem 9rem;
  border-radius: 120px 120px 60px 60px;
  margin: -3rem 0 -80px;
  z-index: 2;
  box-shadow: 0 -10px 60px rgba(0,0,0,0.07);
}
@media (max-width: 1024px) { .blueprint-section { padding: 4rem 3rem 7rem; border-radius: 80px 80px 40px 40px; margin: -2rem 0 -60px; } }
@media (max-width: 767px)  { .blueprint-section { padding: 3rem 1.5rem 6rem; border-radius: 40px 40px 20px 20px; margin: -1rem 0 -40px; } }

.blueprint-card { background: var(--color-ivory); width: 100%; }

.blueprint-spark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.70;
  animation: sparkle 4s ease-in-out infinite;
}
/* Left spark */
.blueprint-spark-1 { top: -2rem; left: -140px; width: clamp(260px, 28vw, 400px); }
/* Right spark — mirror */
.blueprint-spark-2 { top: -2rem; right: -140px; width: clamp(260px, 28vw, 400px); animation-delay: 1.5s; }
@media (max-width: 640px) {
  .blueprint-spark-1, .blueprint-spark-2 { display: none; }
}

.blueprint-heading {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-near-black);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.blueprint-heading-accent { color: var(--color-mid-purple); }

.blueprint-desc {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-dark-gray);
  max-width: 36rem;
  margin: 0 auto 3rem;
  line-height: 1.65;
}

.project-cards { display: flex; flex-direction: column; gap: 1.25rem; }

.project-card {
  background: var(--color-near-black);
  min-height: 280px;
  border-radius: 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
@media (min-width: 768px) { .project-card { flex-direction: row; min-height: 300px; } }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.22); }

.project-card-body {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) { .project-card-body { padding: 2.5rem; } }

.project-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(96,96,160,0.25);
  color: var(--color-soft-lavender);
  font-size: 11px;
  margin-bottom: 1rem;
}
.project-badge--alt {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  color: var(--color-soft-lavender);
  font-size: 11px;
  margin-bottom: 1rem;
}

.project-desc {
  font-size: 0.83rem;
  color: var(--color-dark-gray);
  line-height: 1.65;
  max-width: 32rem;
  margin-bottom: 1rem;
}

.project-services {
  font-size: 10px;
  color: rgba(181,176,200,0.55);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.project-services-label { color: rgba(181,176,200,0.80); font-style: normal; font-weight: 600; }

.btn-blueprint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  justify-content: center;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-lilac-main);
  color: var(--color-near-black);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-blueprint:hover {
  background: var(--color-soft-lavender);
  transform: translateY(-1px);
}

.project-mockup-wrap {
  position: relative;
  overflow: hidden;
  height: 240px; /* mobile fallback height */
}
@media (min-width: 768px) {
  .project-mockup-wrap {
    width: 45%;
    flex-shrink: 0;
    height: auto; /* fills card height via flex row */
  }
}

.mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


.project-logo    { height: 3.5rem; width: auto; margin-bottom: 1rem; object-fit: contain; object-position: left; display: block; }
.project-logo--lg { height: 4.5rem; width: auto; margin-bottom: 1rem; object-fit: contain; object-position: left; display: block; }

.blueprint-more { margin-top: 4rem; text-align: center; }
.blueprint-more-heading {
  font-family: 'Parisienne', cursive;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  color: var(--color-black);
  margin-bottom: 0.5rem;
}
.blueprint-more-text {
  font-size: 0.875rem;
  color: var(--color-dark-gray);
  margin-bottom: 2rem;
  max-width: 24rem;
  margin-left: auto; margin-right: auto;
  line-height: 1.65;
}
.btn-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-warm-brown);
  color: var(--color-warm-brown);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-see-all:hover { background: var(--color-warm-brown); color: var(--color-ivory); }


/* ── Testimonials ───────────────────────────────────────── */
.testimonials-bg { background: var(--color-black); }

#testimonials {
  padding: clamp(5rem, 10vw, 11rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 8vw, 9rem);
}
.testimonials-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-ivory);
  margin-bottom: 3.5rem;
  line-height: 1.2;
}

.testimonials-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .testimonials-inner {
    flex-direction: row;
    gap: 4rem;
    align-items: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .testimonials-inner {
    gap: 2.5rem;
  }
  .cards-col {
    padding-left: 2rem;
  }
  .cards-stack {
    max-width: 340px;
  }
}

/* Mobile: stats section on top, cards below */
@media (max-width: 767px) {
  .testimonials-stats { order: -1; width: 100%; }
  .cards-col          { order:  1; width: 100%; align-items: center; }

  /* Stack promise + stat cards neatly */
  .testimonials-stats  { align-items: center; text-align: center; }
  .promise-wrap        { text-align: center; }
  .promise-divider     { margin: 1rem auto 0; }
  .stat-cards          { flex-direction: row; gap: 0.75rem; }
  .stat-card-dark      { flex: 1; }
}

/* ── Testimonial stack ──────────────────────────────────── */
.cards-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cards-stack {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 370px;
}

.stack-card {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.45s ease;
}

/* Stack positions — fan out to the left, deeper = more offset + darker */
.stack-card[data-pos="0"] {
  transform: rotate(2deg);
  opacity: 1;
  z-index: 4;
  background: var(--color-deep-purple); /* overridden per-card by JS inline style */
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.45s ease,
              background 0.35s ease;
}
.stack-card[data-pos="1"] {
  transform: translate(-14px, 8px) rotate(-3deg);
  opacity: 0.82;
  z-index: 3;
  background: var(--color-mid-purple);
}
.stack-card[data-pos="2"] {
  transform: translate(-26px, 15px) rotate(-7deg);
  opacity: 0.60;
  z-index: 2;
  background: var(--color-muted-purple);
}
.stack-card[data-pos="3"] {
  transform: translate(-36px, 20px) rotate(-11deg);
  opacity: 0.38;
  z-index: 1;
  background: #8080b8;
}

/* Hide content on all non-front cards */
.stack-card:not([data-pos="0"]) .card-header,
.stack-card:not([data-pos="0"]) .card-quote,
.stack-card:not([data-pos="0"]) .card-author { visibility: hidden; }

/* Fly-off animation for the departing top card */
.stack-card.flying-off {
  animation: cardFlyOff 0.46s ease-in forwards;
  z-index: 10 !important;
  pointer-events: none;
  transition: none !important;
}

/* Dot indicator */
.testimonial-dots {
  display: flex;
  gap: 7px;
  margin-top: 2rem;
  justify-content: center;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(181,176,200,0.30);
  transition: background 0.3s ease, transform 0.3s ease;
}
.dot.active {
  background: rgba(181,176,200,0.90);
  transform: scale(1.3);
}

.testimonial-hint {
  font-size: 0.72rem;
  color: rgba(181,176,200,0.45);
  font-style: italic;
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-stars { color: #fde047; letter-spacing: 0.1em; font-size: 0.875rem; }
.card-badge {
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
}
.card-quote {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.90);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}
.card-author { display: flex; align-items: center; gap: 0.75rem; }
.card-avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(181,176,200,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.card-avatar-initial { color: var(--color-ivory); font-size: 0.75rem; font-weight: 600; }
.card-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.card-name { color: var(--color-ivory); font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.card-title-text { color: rgba(255,255,255,0.50); font-size: 0.75rem; }

.testimonials-stats { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.promise-wrap { margin-bottom: 1.5rem; }
.promise-wrap p { line-height: 1.4; }
.promise-divider {
  margin-top: 1rem;
  border: none;
  border-top: 1px dashed rgba(181,176,200,0.25);
  width: 11rem;
}

.stat-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.stat-card-dark { background: rgba(255,255,255,0.07); border-radius: var(--radius-24); padding: 1rem 1.5rem; }
.stat-number { font-family: 'Parisienne', cursive; font-weight: 700; font-size: 1.875rem; color: var(--color-ivory); line-height: 1; }
.stat-sub-label { font-size: 0.75rem; color: rgba(181,176,200,0.65); margin-top: 0.25rem; }

.testimonial-promise-label {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #ffffff;
  line-height: 1.2;
}
.testimonial-promise-word {
  font-family: 'Parisienne', cursive;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  color: var(--color-soft-lavender);
  font-style: italic;
  line-height: 1;
  display: block;
}


/* ── Ending Statement ───────────────────────────────────── */
.ivory-card-rise {
  background: var(--color-ivory);
  border-radius: 44px 44px 0 0;
}
#ending { padding: clamp(4rem, 8vw, 8rem) 1.5rem; }
.ending-inner { max-width: 42rem; margin: 0 auto; text-align: center; }
.ending-line {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  color: var(--color-deep-purple);
  margin-bottom: 0.375rem;
  line-height: 1.5;
}
.ending-accent {
  font-family: 'Rethink Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--color-mid-purple);
}


/* ══════════════════════════════════════════════════════════
   CONTACT MODAL  (shared across pages)
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.modal-card {
  display: flex;
  width: 100%;
  max-width: min(1260px, 94vw);
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55);
  transform: translateY(32px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.is-open .modal-card { transform: translateY(0); }

.modal-left {
  flex: 0 0 42%;
  background: linear-gradient(160deg, #1e1b2e 0%, #2c2b3a 60%, #3a2e4a 100%);
  padding: 3.5rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
}
.modal-left::before {
  content: '✦';
  position: absolute;
  top: -1rem; right: -1rem;
  font-size: 14rem;
  color: rgba(181,176,200,0.04);
  pointer-events: none;
  line-height: 1;
}
.modal-left::after {
  content: '✦';
  position: absolute;
  bottom: 2rem; left: 1rem;
  font-size: 6rem;
  color: rgba(181,176,200,0.05);
  pointer-events: none;
  line-height: 1;
}
.modal-heading {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--color-ivory);
  line-height: 1.25;
  margin: 0;
}
.modal-heading-script {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  color: var(--color-soft-lavender);
  display: block;
  margin-top: 0.4rem;
  line-height: 1.15;
  text-shadow: 0 0 40px rgba(181,176,200,0.30);
}
.modal-tagline {
  font-size: 0.84rem;
  color: rgba(250, 246, 237, 0.52);
  line-height: 1.85;
  margin: 0;
}
.modal-right {
  flex: 1;
  background: var(--color-ivory);
  padding: 3rem 3rem 2.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(44, 43, 58, 0.09);
  color: var(--color-near-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-close:hover { background: rgba(44, 43, 58, 0.18); }

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
  padding-top: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label {
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-muted-purple);
}
.form-note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-mid-purple);
  font-size: 0.62rem;
}
.form-input {
  background: rgba(44, 43, 58, 0.07);
  color: var(--color-near-black);
  border: 1px solid rgba(107,102,138,0.20);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-family: 'Rethink Sans', sans-serif;
  font-size: 0.84rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-input::placeholder { color: rgba(44,43,58,0.35); }
.form-input:focus { background: rgba(107,102,138,0.08); border-color: rgba(107,102,138,0.45); }
.form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='rgba%2844%2C43%2C58%2C0.45%29' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.btn-form-submit {
  background: var(--color-near-black);
  color: var(--color-ivory);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  font-family: 'Rethink Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.btn-form-submit:hover { background: var(--color-deep-purple); transform: translateY(-1px); }
.btn-form-submit:disabled { opacity: 0.65; cursor: default; transform: none; }

@media (max-width: 640px) {
  .modal-card { flex-direction: column; max-height: 90vh; overflow-y: auto; }
  .modal-left { flex: 0 0 auto; padding: 2.5rem 2rem 2rem; }
  .modal-right { padding: 1.5rem 1.75rem 2rem; }
}

/* ══════════════════════════════════════════════════════════
   CTA + FOOTER REDESIGN
══════════════════════════════════════════════════════════ */

/* Wrapper: soft-lavender bg that shows around and below the dark CTA card */
.cta-footer-area {
  background: var(--color-soft-lavender);
  padding: 0;
  overflow: hidden;
}

/* ── Shared contact card (used in CTA areas across pages) ── */
.cta-card-wrap {
  display: flex;
  justify-content: center;
  padding: 3rem 2rem 4rem;
}

/* Force readable colors inside the card regardless of page theme */
.cta-card-wrap .contact-card { color: var(--color-near-black) !important; }
.cta-card-wrap .contact-eyebrow { color: var(--color-muted-purple) !important; }
.cta-card-wrap .contact-heading { color: var(--color-near-black) !important; }
.cta-card-wrap .contact-spark { color: var(--color-mid-purple) !important; }
.cta-card-wrap .contact-subheading { color: var(--color-black) !important; }

.contact-card {
  background: var(--color-ivory);
  border-radius: 28px;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
  width: 100%;
  max-width: 1060px;
  box-shadow: 0 8px 60px rgba(20,18,40,0.18);
  color: var(--color-black);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.contact-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-muted-purple);
  margin: 0;
}

.contact-heading {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--color-near-black);
  margin: 0;
}

.contact-spark { color: var(--color-mid-purple); }

.contact-subheading {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--color-black);
  font-style: italic;
  display: block;
}

.btn-contact-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 3rem;
  border-radius: 999px;
  border: none;
  background: var(--color-mid-purple);
  color: #fff;
  font-family: 'Rethink Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-contact-big:hover {
  background: var(--color-deep-purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(96,96,160,0.35);
}

/* ── New footer ──────────────────────────────────────────── */
.new-footer {
  background: var(--color-soft-lavender);
  padding: 3rem clamp(2rem, 6vw, 6rem) 2.5rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}

.new-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr auto;
  align-items: start;
  gap: 3rem;
  padding-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .new-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .cta-footer-area { padding: 0; }
}

.new-footer-heading {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--color-dark-espresso);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.new-footer-accent { color: var(--color-dark-espresso); }
.new-footer-kry {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--color-deep-purple);
  display: inline-block;
  vertical-align: middle;
}

.new-footer-tagline {
  font-size: 0.85rem;
  color: var(--color-ivory);
  line-height: 1.7;
  margin: 0;
  max-width: 260px;
}

/* Centered social icons row */
.new-footer-socials-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.75rem 0 2rem;
}

.new-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.new-footer-social-link:hover { transform: scale(1.08); opacity: 0.88; }
.new-footer-social-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.new-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.new-footer-col-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-deep-purple);
  margin-bottom: 0.4rem;
}

/* Navigate column — centered, larger links */
.new-footer-col--nav {
  align-items: flex-start;
  text-align: left;
}
.new-footer-col--nav .new-footer-link { font-size: 1.15rem; }

.new-footer-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark-espresso);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.3;
}
.new-footer-link:hover { color: var(--color-deep-purple); }

.new-footer-info {
  font-size: 0.875rem;
  color: var(--color-dark-espresso);
  margin: 0;
  line-height: 1.55;
}

/* Divider between socials and copyright */
.new-footer-divider {
  border: none;
  border-top: 1px solid rgba(250, 246, 237, 0.30);
  margin: 0 0 1.5rem;
}

.new-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-footer-copy {
  font-size: 0.75rem;
  color: var(--color-ivory);
  margin: 0;
  text-align: center;
}
.new-footer-copy-tagline { display: block; }

/* ── kry-symbol decorative + shooting-star hover ─────────── */
@keyframes symbolFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-7px) rotate(0deg); }
}
@keyframes symbolHover {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  20%  { transform: translateY(-5px)  rotate(-10deg); }
  50%  { transform: translateY(-8px)  rotate(7deg);   }
  75%  { transform: translateY(-3px)  rotate(-5deg);  }
  100% { transform: translateY(0px)   rotate(0deg);   }
}

.footer-deco {
  /* grid column — no longer absolutely positioned */
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
  padding-top: 0.25rem;
}

.footer-kry-symbol-img {
  width: 145px;
  height: auto;
  object-fit: contain;
  display: block;
  animation: symbolFloat 3.5s ease-in-out infinite;
  transition: filter 0.3s ease;
  filter: drop-shadow(0 4px 14px rgba(250,246,237,0.12));
}
.footer-deco:hover .footer-kry-symbol-img {
  animation: symbolHover 1s ease-in-out infinite;
  filter: drop-shadow(0 6px 22px rgba(250,246,237,0.38));
}

/* Shooting star characters */
.deco-star {
  position: absolute;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  line-height: 1;
}
.footer-deco .deco-star {
  color: rgba(250, 246, 237, 0.95) !important;
}

/* Positioned around the symbol — kept well inside footer bounds */
.deco-star-1 { top: 12%;   right: -8px;   font-size: 1.1rem; }
.deco-star-2 { bottom: 18%; left: -12px;   font-size: 1rem;   }
.deco-star-3 { top: 50%;   right: -6px;   font-size: 0.85rem; }
.deco-star-4 { top: 20%;   left: 35%;     font-size: 0.9rem;  }
.deco-star-5 { bottom: 8%; right: 18%;   font-size: 1.2rem;  }
.deco-star-6 { top: 38%;   left: -10px;   font-size: 0.8rem;  }

.footer-deco:hover .deco-star-1 { animation: starShoot1 0.75s ease-out          forwards; }
.footer-deco:hover .deco-star-2 { animation: starShoot2 0.75s ease-out 0.10s    forwards; }
.footer-deco:hover .deco-star-3 { animation: starShoot3 0.75s ease-out 0.20s    forwards; }
.footer-deco:hover .deco-star-4 { animation: starShoot4 0.75s ease-out 0.05s    forwards; }
.footer-deco:hover .deco-star-5 { animation: starShoot5 0.75s ease-out 0.15s    forwards; }
.footer-deco:hover .deco-star-6 { animation: starShoot6 0.75s ease-out 0.30s    forwards; }

/* Outward burst — no upward travel > 36px to avoid cta-footer-area clip */
@keyframes starShoot1 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(44px,-36px) scale(1.5); }
}
@keyframes starShoot2 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-46px,38px) scale(1.4); }
}
@keyframes starShoot3 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(50px,22px) scale(1.3); }
}
@keyframes starShoot4 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  /* reduced upward to -26px so it stays within footer */
  100% { opacity: 0; transform: translate(10px,-26px) scale(1.5); }
}
@keyframes starShoot5 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(24px,46px) scale(1.4); }
}
@keyframes starShoot6 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-48px,-20px) scale(1.3); }
}

@media (max-width: 768px) {
  .footer-deco {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
  }
  .footer-kry-symbol-img { width: 80px; }
}

.new-footer-col--find { position: relative; }
.new-footer-kry-symbol { display: none; }

/* Footer Find Me column — icon + text rows */
.footer-find-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-find-icon {
  width: 26px;
  height: 26px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 50%;
}
.footer-find-email {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Rethink Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark-espresso);
  padding: 0;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s ease;
}
.footer-find-email:hover { color: var(--color-deep-purple); }
.footer-email-tooltip {
  position: absolute;
  top: -1.75rem;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  background: var(--color-near-black);
  color: var(--color-ivory);
  font-size: 10px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints per spec
   Mobile  < 768px   single column, hamburger, full-width CTAs
   Tablet  768–1024px  2-col grid, medium CTAs
   Desktop > 1024px  full layout, max-width 1440px centered
══════════════════════════════════════════════════════════ */

/* ── Global max-width container ─────────────────────────── */
.hero-main,
#testimonials,
.blueprint-section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ── Tablet (768–1024px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Featured works — 2-column grid */
  .project-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .project-card { flex-direction: column; min-height: auto; }
  .project-mockup-wrap { width: 100%; height: 220px; }

  /* Framework panels — tighter */
  .kry-panels { min-height: 340px; }

  /* Footer — 2x2 */
  .new-footer-inner { grid-template-columns: 1fr 1fr; }

  /* CTA card */
  .cta-card-wrap { padding: 2.5rem 2rem 3rem; }

  /* Modal */
  .modal-card { max-width: 760px; }
  .modal-left { flex: 0 0 38%; padding: 2.5rem 2rem; }
}

/* ── Mobile (< 768px) ───────────────────────────────────── */
/* Testimonial stack — fixed height at each breakpoint */
@media (max-width: 767px) {
  .cards-stack { height: 340px; }
}
@media (max-width: 480px) {
  .cards-stack { height: 320px; }
  .card-quote { -webkit-line-clamp: 7; }
}
@media (max-width: 767px) {
  /* Hero */
  #hero { padding-top: 5rem; padding-bottom: 2rem; }
  .hero-handwriting { height: 3.5rem; }
  .hero-heading-group h1 { margin-top: 2.5rem; gap: 0.15em; }
  .hero-badge { margin-top: 1rem; }
  .hero-desc br { display: none; }
  .hero-ctas { flex-direction: column; gap: 0.75rem; }
  .btn-warm-brown { width: 100%; min-width: 0; justify-content: center; text-align: center; padding: 0.9rem 1.5rem; }

  /* Featured works — single column */
  .project-cards { grid-template-columns: 1fr; }
  .project-card { flex-direction: column; }
  .project-mockup-wrap { width: 100%; height: 200px; }

  /* Testimonials inner already stacked at 768px */

  /* CTA card — full width */
  .cta-card-wrap { padding: 2rem 1rem 2.5rem; }
  .contact-card { border-radius: 20px; padding: 2rem 1.25rem; }
  .contact-heading { font-size: clamp(1.3rem, 5vw, 2rem); }
  .btn-contact-big { width: 100%; }

  /* Modal — full screen feel */
  .modal-overlay { padding: 0.75rem; }
  .modal-card {
    flex-direction: column;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 20px;
  }
  .modal-left {
    flex: 0 0 auto;
    padding: 2rem 1.75rem 1.75rem;
  }
  .modal-left::before { font-size: 8rem; }
  .modal-left::after  { display: none; }
  .modal-right { padding: 1.5rem 1.75rem 2rem; }
  .modal-heading-script { font-size: clamp(1.4rem, 5vw, 1.8rem); }

  /* Footer — single column, everything centered */
  .new-footer { padding: 2.5rem 1.5rem 2rem; }
  .new-footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  /* Deco (moon): above brand, centered */
  .footer-deco {
    position: static !important;
    order: -2;
    display: flex;
    justify-content: center;
    padding-top: 0;
  }
  .footer-kry-symbol-img { width: 72px !important; }
  /* Brand */
  .new-footer-brand {
    grid-column: 1;
    text-align: center;
    order: -1;
  }
  .new-footer-brand .new-footer-tagline { max-width: 100%; }
  .new-footer-heading { font-size: clamp(1.5rem, 6vw, 2.2rem); white-space: normal; }
  /* Nav + Find Me: centered */
  .new-footer-col { align-items: center; text-align: center; }
  .new-footer-col-label { margin-bottom: 0.6rem; text-align: center; }
  .new-footer-col--nav { align-items: center; }
  .new-footer-col--nav .new-footer-link { text-align: center; }
  .footer-find-item { gap: 0.5rem; justify-content: center; }
  .new-footer-info { text-align: center; }
  /* Socials centered */
  .new-footer-socials-center { justify-content: center; }
  /* Copyright: two lines, centered */
  .new-footer-copy { text-align: center; line-height: 1.9; }

  /* Blueprint sparks hidden on mobile */
  .blueprint-spark-1,
  .blueprint-spark-2 { display: none; }
}

/* ── Small mobile (< 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .hero-handwriting { height: 2.8rem; }
  .hero-heading-group h1 { margin-top: 2rem; gap: 0.1em; }
  .hero-badge { margin-top: 0.75rem; }

  .hero-stats-inner { padding: 0.75rem 0.75rem; border-radius: 20px; }
  .hero-stat { padding: 0.6rem 0.6rem; align-items: center; text-align: center; }
  .hero-stat-number, .hero-stat-number--location { font-size: 1.3rem; }

  .kry-panel.active  { height: 320px; }
  .kry-panel.compact { height: 58px; }
  .panel-visual      { height: 110px; }
  .panel-body        { padding: 1rem 0.875rem 0.5rem; }

  .marquee-word { padding: 0 0.75rem; font-size: 0.72rem; }

  /* CTA button full width on small mobile */
  .btn-lilac { width: 100%; justify-content: center; text-align: center; }
}