/* =========================================================
   Bind — landing page stylesheet
   ========================================================= */

:root {
  --bg: #f2f2f2;
  --white: #ffffff;
  --border: #e6e4e0;
  --border-soft: #ececea;

  --text-1: #0e0e0d;
  --text-2: #6b6a67;
  --text-3: #9c9a96;

  --black: #121210;
  --dark-card: #17160f;
  --dark-card-2: #201f18;

  --blue: #4759f5;
  --blue-dark: #3546d6;
  --green: #16a34a;

  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px rgba(16, 15, 10, 0.04);
  --shadow-lift: 0 20px 45px -20px rgba(16, 15, 10, 0.25);

  --container: 1120px;
  /* Bind / Framer typography: Inter Text for UI + Inter Display optical size for large headings */
  --font: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'InterVariable', 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: 'liga' 1, 'calt' 1;
  font-variation-settings: 'opsz' 14;
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 700; }

/* Framer uses the display optical cut of Inter for prominent headings.
   Inter v4 exposes the same design through the opsz axis at 32. */
h1, h2,
.pricing-card__price .amount {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.hide-mobile { display: inline; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--outline { background: var(--white); color: var(--text-1); border-color: var(--border); }
.btn--outline:hover { border-color: #c9c7c1; }

.btn--light { background: var(--white); color: var(--black); }
.btn--light:hover { background: #f2f2f2; }

.btn--block { width: 100%; }

/* ---------- Badges / eyebrows ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-full);
}
.section__head > .badge { padding: 6px 16px; }

.badge__tag {
  background: var(--black);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 242, 242, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled { border-bottom-color: var(--border); }

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.navbar__logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.navbar__nav a { transition: color 0.15s ease; }
.navbar__nav a:hover { color: var(--text-1); }

.navbar__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 72px 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge--hero { margin-bottom: 28px; }

.hero__title {
  font-size: 54px;
  line-height: 1.08;
  max-width: 760px;
}

.hero__subtitle {
  margin-top: 22px;
  color: var(--text-2);
  font-size: 16.5px;
  max-width: 520px;
}

.hero__actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

/* ---- Mockup card ---- */
.mockup {
  margin-top: 56px;
  width: 100%;
  max-width: 900px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  text-align: left;
}

.mockup__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
}

.mockup__dots { display: flex; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot--red { background: #ff5f57; }
.dot--yellow { background: #febc2e; }
.dot--green { background: #28c840; }

.mockup__tools { display: flex; gap: 10px; }
.mockup__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  border-radius: var(--radius-full);
}

.mockup__chat {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 170px;
}

.chat-bubble {
  max-width: 62%;
  padding: 11px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.chat-bubble--in {
  align-self: flex-start;
  background: #f2f2f2;
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}
.chat-bubble--out {
  align-self: flex-end;
  background: #eef1ff;
  color: #2c3bcf;
  border-bottom-right-radius: 4px;
}

.mockup__input {
  margin: 0 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 20px;
  font-size: 14px;
  color: var(--text-3);
}
.mockup__send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.mockup__send:hover { background: var(--blue-dark); }

/* ---- Brand strip ---- */
.brands { margin-top: 52px; padding-bottom: 88px; }
.brands__label { font-size: 13.5px; color: var(--text-3); margin-bottom: 20px; }
.brands__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  filter: grayscale(1);
  opacity: 0.55;
}
.brand-logo { font-size: 18px; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
.brand-logo--serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }

/* =========================================================
   SHARED SECTION LAYOUT
   ========================================================= */
.section { padding: 96px 24px; border-top: 1px solid var(--border-soft); scroll-margin-top: 88px; }

.section__head { text-align: center; max-width: 620px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; }
.section__head h2 { font-size: 38px; line-height: 1.15; margin-top: 20px; }
.section__head p { font-size: 15.5px; color: var(--text-2); margin-top: 16px; }

/* =========================================================
   BENEFITS
   ========================================================= */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}

.benefit-card__visual {
  height: 128px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
}

.benefit-card__visual--folder {
  overflow: hidden;
}

.folder-stack {
  position: relative;
  width: 176px;
  height: 112px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.stack-card {
  position: absolute;
  top: 14px;
  width: 76px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(18, 18, 16, 0.08);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, opacity .3s ease;
  transform-origin: bottom center;
}

.stack-card span {
  opacity: .92;
}

.stack-card--left {
  left: 22px;
  background: linear-gradient(180deg, #141230 0%, #080712 100%);
  color: #f16a7a;
  transform: translate3d(8px, 14px, 0) rotate(-4deg);
  z-index: 1;
}

.stack-card--center {
  left: 50%;
  margin-left: -38px;
  background: linear-gradient(180deg, #fbfaf6 0%, #f0ece4 100%);
  color: #8d8a85;
  transform: translate3d(0, 10px, 0) rotate(1deg);
  z-index: 2;
}

.stack-card--right {
  right: 18px;
  background: linear-gradient(180deg, #f8f3ea 0%, #efe7db 100%);
  color: #44382f;
  transform: translate3d(-8px, 15px, 0) rotate(5deg);
  z-index: 3;
}

.folder-pocket {
  position: relative;
  width: 164px;
  height: 86px;
  z-index: 5;
}

.folder-pocket__tab {
  position: absolute;
  left: 20px;
  top: 0;
  width: 52px;
  height: 22px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #efeeeb 0%, #e8e6e2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.folder-pocket__body {
  position: absolute;
  inset: 14px 0 0;
  border-radius: 10px;
  background: linear-gradient(98deg, #ecebea 0%, #f6f5f3 44%, #e7e5e2 100%);
  box-shadow:
    0 12px 20px rgba(18,18,16,.07),
    inset 0 1px 0 rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.folder-pocket__body::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,.56), rgba(255,255,255,0));
  transform: skewX(-12deg);
  opacity: .78;
}

.folder-pocket__body::after {
  content: '';
  position: absolute;
  inset: auto 18px 12px 18px;
  height: 10px;
  border-radius: 999px;
  background: rgba(18,18,16,.05);
  filter: blur(10px);
}

.folder-pocket__body span {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  color: #b0ada7;
  letter-spacing: 0.04em;
}

.benefit-card__visual--folder:hover .stack-card,
.benefit-card__visual--folder:focus-within .stack-card,
.benefit-card:hover .benefit-card__visual--folder .stack-card {
  box-shadow: 0 16px 28px rgba(18, 18, 16, 0.12);
}

.benefit-card__visual--folder:hover .stack-card--left,
.benefit-card:hover .benefit-card__visual--folder .stack-card--left {
  transform: translate3d(-18px, -3px, 0) rotate(-16deg);
}

.benefit-card__visual--folder:hover .stack-card--center,
.benefit-card:hover .benefit-card__visual--folder .stack-card--center {
  transform: translate3d(0, -8px, 0) rotate(3deg);
}

.benefit-card__visual--folder:hover .stack-card--right,
.benefit-card:hover .benefit-card__visual--folder .stack-card--right {
  transform: translate3d(18px, -5px, 0) rotate(12deg);
}

.benefit-card__visual--folder:hover .folder-pocket,
.benefit-card:hover .benefit-card__visual--folder .folder-pocket {
  transform: translateY(6px);
}

.folder-pocket {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #ffd166, #ef476f, #a06cd5, #4361ee, #4cc9f0, #7bf1a8, #ffd166);
  filter: blur(0.3px) saturate(1.15);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
}

.mini-btn {
  background: var(--black);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-full);
}

.benefit-card h3 { font-size: 17px; margin-bottom: 8px; }
.benefit-card p { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* =========================================================
   TOOLS
   ========================================================= */
.tools-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-card);
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 488px;
  margin: 0 auto;
}

.tool-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.35);
  transition: transform 0.2s ease;
}
.tool-icon:hover { transform: translateY(-3px); }

.tool-icon--wheel {
  background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  border-radius: 50%;
  box-shadow: none;
}
.tool-icon--dots {
  position: relative;
  background: radial-gradient(circle at 30% 30%, var(--c1), var(--c2));
}
.tool-icon--dots::before {
  content: "";
  width: 55%;
  height: 55%;
  background-image: radial-gradient(white 22%, transparent 24%);
  background-size: 33% 33%;
  opacity: 0.85;
}
.tool-icon--waves {
  background: linear-gradient(145deg, var(--c1), var(--c2));
  position: relative;
  overflow: hidden;
}
.tool-icon--waves::before {
  content: "";
  width: 60%;
  height: 40%;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 6px);
  opacity: 0.9;
}

/* =========================================================
   FEATURES
   ========================================================= */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { border-color: #cfcdc6; transform: translateY(-2px); }

.feature-card__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  margin-bottom: 26px;
}

.feature-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* =========================================================
   GETTING STARTED
   ========================================================= */
.onboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.onboard__text h2 { font-size: 34px; line-height: 1.15; }
.onboard__text p { margin-top: 16px; font-size: 15.5px; color: var(--text-2); max-width: 380px; }

.onboard__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}

.onboard__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, #ffd7c2 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, #f7b9d8 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, #c9b8f7 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, #ffe29a 0%, transparent 45%),
    linear-gradient(135deg, #f4ded1, #eec8d8);
  filter: blur(6px) saturate(1.15);
  transform: scale(1.1);
}

.signin-card {
  position: relative;
  z-index: 1;
  width: 260px;
  background: rgba(255,255,255,0.97);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-lift);
}
.signin-card__title { text-align: center; font-weight: 800; font-size: 16px; margin-bottom: 18px; }
.signin-card__field {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 10px;
}
.signin-card__field--muted { color: var(--text-3); }
.signin-card .btn--dark { margin-top: 4px; padding: 11px; font-size: 13.5px; }
.signin-card__login { display:block; margin-top:12px; text-align:center; color:var(--text-2); font-size:12.5px; font-weight:700; }
.signin-card__login:hover { color:#3546D6; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 48px;
  font-size: 14px;
  color: var(--text-3);
  font-weight: 500;
}
.pricing-toggle__label.is-active { color: var(--text-1); font-weight: 600; }
.pricing-toggle__label em { font-style: normal; color: var(--green); font-weight: 600; }

.switch {
  width: 42px;
  height: 24px;
  background: var(--black);
  border-radius: var(--radius-full);
  border: none;
  position: relative;
  padding: 0;
}
.switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.switch[aria-checked="true"] .switch__knob { transform: translateX(18px); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.pricing-card h3 { font-size: 15px; font-weight: 600; color: var(--text-2); }

.pricing-card__price { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.pricing-card__price .amount { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.pricing-card__price .period { font-size: 14px; color: var(--text-3); }

.pricing-card__billed { font-size: 13px; color: var(--text-3); margin-top: 4px; margin-bottom: 22px; }

.pricing-card__divider { height: 1px; background: var(--border-soft); margin: 24px 0 18px; }
.pricing-card__features-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }

.pricing-card__features { display: flex; flex-direction: column; gap: 12px; }
.pricing-card__features li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.pricing-card__features svg { flex-shrink: 0; }

.pricing-card--popular {
  background: var(--dark-card);
  border-color: var(--dark-card);
  color: #fff;
  transform: scale(1.035);
  box-shadow: var(--shadow-lift);
}
.pricing-card--popular h3 { color: rgba(255,255,255,0.65); }
.pricing-card--popular .pricing-card__price .period { color: rgba(255,255,255,0.45); }
.pricing-card--popular .pricing-card__billed { color: rgba(255,255,255,0.45); }
.pricing-card--popular .pricing-card__divider { background: rgba(255,255,255,0.12); }
.pricing-card--popular .pricing-card__features-label { color: rgba(255,255,255,0.4); }
.pricing-card--popular .pricing-card__features li { color: rgba(255,255,255,0.85); }

.pricing-card__badge {
  position: absolute;
  top: 26px; right: 26px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  z-index: 1;
}
.pricing-card__glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(94,114,255,0.55), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* =========================================================
   TEAM
   ========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Reference-style white card: the white border belongs to the card,
   not to an inner decorative frame. Admin images can later replace
   .team-card__placeholder with <img class="team-card__image">. */
.team-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e5e5e2;
  border-radius: 12px;
  padding: 8px 8px 13px;
  box-shadow: 0 1px 2px rgba(16, 15, 10, .025);
}

.team-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 5px;
  overflow: hidden;
  background: #d7d7d4;
}

.team-card__image,
.team-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.team-card__image {
  object-fit: cover;
  object-position: center;
}

.team-card__placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Temporary neutral placeholders only. Real employee photos will occupy
   exactly the same full-bleed image area when the admin panel is connected. */
.team-card__placeholder--dark {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.15) 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 50% 93%, rgba(255,255,255,.13) 0 34%, transparent 34.5%),
    linear-gradient(155deg, #49514b 0%, #243229 56%, #151b17 100%);
}

.team-card__placeholder--light {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.28) 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 50% 93%, rgba(255,255,255,.22) 0 34%, transparent 34.5%),
    linear-gradient(155deg, #cfd7cd 0%, #aebbaa 48%, #8e9d8c 100%);
}

.team-card__placeholder--gray {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.24) 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 50% 93%, rgba(255,255,255,.20) 0 34%, transparent 34.5%),
    linear-gradient(155deg, #d3d3d4 0%, #b8b8ba 52%, #9b9b9d 100%);
}

.team-card__placeholder span {
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.12);
}

.team-card__link {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(225,225,222,.9);
  color: #20201f;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, background .15s ease;
}

.team-card__link i {
  font-size: 17px;
  line-height: 1;
}

.team-card__link:hover {
  transform: translateY(-1px);
  background: #fff;
}

.team-card__body {
  padding: 12px 2px 0;
}

.team-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.team-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.team-grid__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--text-2);
  border: 1px dashed #dededb;
  border-radius: 12px;
  background: #fff;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 19px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  position: relative;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-soft);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--text-2);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-item__icon::before { width: 8px; height: 1.4px; }
.faq-item__icon::after { width: 1.4px; height: 8px; }

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.faq-item__a p {
  padding: 0 22px 20px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

.faq-item.is-open .faq-item__a { max-height: 200px; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item.is-open .faq-item__q { color: var(--text-1); }

/* =========================================================
   CTA
   ========================================================= */
.cta {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 { font-size: 34px; line-height: 1.15; margin-top: 20px; }
.cta p { margin-top: 16px; font-size: 15.5px; color: var(--text-2); max-width: 420px; }
.cta .btn { margin-top: 28px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { padding-top: 72px; }

.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

.footer__logo { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
.footer__brand p { color: var(--text-2); font-size: 14px; line-height: 1.6; }

.footer__socials { display: flex; gap: 10px; margin-top: 20px; }
.footer__socials a {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer__socials a:hover { color: var(--text-1); border-color: #cfcdc6; }

.footer__col-title { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--text-2); }
.footer__col a:hover { color: var(--text-1); }

.footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding: 22px 24px;
  font-size: 13px;
  color: var(--text-3);
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 90;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* =========================================================
   FRAMER-LIKE MOTION SYSTEM
   ========================================================= */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal] {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 0.72s var(--motion-ease),
    transform 0.86s var(--motion-ease),
    filter 0.72s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

[data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Hero enters in a deliberate sequence, like Framer's appear effects. */
.hero > [data-reveal]:not(.is-visible) {
  transform: translate3d(0, 34px, 0) scale(0.98);
}

.hero .mockup[data-reveal]:not(.is-visible) {
  filter: blur(12px);
  transform: translate3d(0, 46px, 0) scale(0.95);
  transition-duration: 0.9s, 1.05s, 0.9s;
}

.hero .brands[data-reveal]:not(.is-visible) {
  transform: translate3d(0, 22px, 0);
}

.section__head[data-reveal]:not(.is-visible) {
  transform: translate3d(0, 34px, 0) scale(0.98);
}

.tools-card[data-reveal]:not(.is-visible),
.onboard__visual[data-reveal]:not(.is-visible),
.pricing-grid[data-reveal]:not(.is-visible),
.cta[data-reveal]:not(.is-visible) {
  transform: translate3d(0, 42px, 0) scale(0.965);
  filter: blur(10px);
}

/* Internal layers used for subtle scroll-linked depth. */
.mockup__chat,
.tools-grid,
.onboard__bg {
  will-change: transform;
}

.onboard__bg {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.12);
}

/* Small ambient movement keeps the visual blocks alive after reveal. */
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -7px, 0) scale(1.035); }
}

.orb {
  animation: orbFloat 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .orb { animation: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero__title { font-size: 44px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefits-grid .benefit-card:last-child { grid-column: 1 / -1; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid .team-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 10px); justify-self: center; }
  .pricing-card--popular { transform: none; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hide-mobile { display: none; }

  .navbar__nav { display: none; }
  .navbar__toggle { display: flex; }
  .navbar.is-open .navbar__nav {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 24px 20px;
  }
  .navbar.is-open .navbar__nav a { width: 100%; padding: 10px 0; }

  .hero { padding-top: 52px; }
  .hero__title { font-size: 32px; }
  .hero__subtitle { font-size: 15px; }
  .hero__actions { flex-direction: column; width: 100%; max-width: 280px; }
  .btn { width: 100%; }

  .mockup__topbar { flex-wrap: wrap; gap: 10px; }
  .chat-bubble { max-width: 82%; }
  .brands__row { gap: 22px; }

  .section { padding: 64px 20px; }
  .section__head h2 { font-size: 28px; }

  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-grid .benefit-card:last-child { grid-column: auto; }

  .tools-card { padding: 24px 16px; }
  .tools-grid { max-width: 300px; gap: 12px; }
  .tool-icon { width: 48px; height: 48px; }

  .features-grid { grid-template-columns: 1fr; }

  .onboard { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .onboard__text p { margin-left: auto; margin-right: auto; }
  .onboard__visual { min-height: 300px; }

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--popular { order: -1; }

  .team-grid { grid-template-columns: 1fr; }
  .team-grid .team-card:last-child { max-width: 100%; }
  .team-card__media { aspect-ratio: 4/5; }

  .cta { padding: 44px 24px; }
  .cta h2 { font-size: 26px; }

  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}


/* ================= CEFARCH BRAND OVERRIDES ================= */
:root{
  --bg:#f2f2f2;
  --cef-blue:#007cff;
}

.navbar__logo{display:flex;align-items:center;width:126px;height:34px;overflow:visible;}
.navbar__logo img{display:block;width:116px;height:auto;object-fit:contain;}
.footer__logo{height:34px;display:flex;align-items:center;margin-bottom:16px;}
.footer__logo img{width:126px;height:auto;display:block;}

.hero{position:relative;isolation:isolate;overflow:visible;}
.hero > *:not(.hero__mark){position:relative;z-index:2;}
.hero__mark{position:absolute;z-index:0;pointer-events:none;user-select:none;opacity:.026;filter:grayscale(1);}
.hero__mark--left{width:360px;left:-260px;top:70px;transform:rotate(-11deg);}
.hero__mark--right{width:300px;right:-230px;top:410px;transform:rotate(12deg);}

.badge--hero{padding:4px 5px 4px 5px;gap:8px;}
.badge--hero .badge__tag{background:#111;color:#fff;border-radius:999px;padding:5px 12px;margin:0;}
.hero__title{font-size:58px;letter-spacing:-.045em;}
.hero__subtitle{max-width:700px;}

.tool-word{display:inline-flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;letter-spacing:-.04em;min-width:86px;}
.tool-word--blue{color:#2f91c8}.tool-word--red{color:#d91f4d}.tool-word--dark{color:#111}.tool-word--gemini{color:#457cf4}.tool-word--orange{color:#ff742a}

.anchor-alias{position:absolute;top:-90px;}
#portfolio{position:relative;}
.benefit-visual-label{position:absolute;font-size:12px;font-weight:800;color:#797770;bottom:24px;}

/* Social logos */
#tools .tools-card{padding:54px 36px;}
#tools .tools-grid{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;}
.tools-grid--social {
  gap: 14px;
  max-width: 520px;
}

.social-icon {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(18,18,16,.06);
  box-shadow: 0 5px 14px rgba(18,18,16,.08), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, filter .2s ease;
  text-decoration: none;
  overflow: hidden;
}

.social-icon i {
  font-size: 26px;
  line-height: 1;
  display: block;
}

.social-icon:hover {
  transform: translateY(-5px) scale(1.045);
  box-shadow: 0 13px 28px rgba(18,18,16,.14), inset 0 1px 0 rgba(255,255,255,.18);
  filter: saturate(1.04);
}

.social-icon:active {
  transform: translateY(-2px) scale(.99);
}

.social-icon--instagram {
  background: radial-gradient(circle at 31% 107%, #fdf497 0 7%, #fd5949 31%, #d6249f 59%, #285aeb 100%);
}
.social-icon--whatsapp { background:#25D366; }
.social-icon--linkedin { background:#0A66C2; }
.social-icon--behance { background:#1769FF; }
.social-icon--facebook { background:#1877F2; }
.social-icon--telegram { background:#229ED9; }
.social-icon--tiktok { background:#101010; }
.social-icon--youtube { background:#FF0000; }


#features .feature-card p{max-width:none;}

/* Registration visual */
.onboard__bg{background:linear-gradient(135deg,#ffd1b8 0%,#f7b5d8 42%,#c8b8ef 72%,#ffd580 100%);}
.signin-card__title{font-size:18px;font-weight:800;}

/* Pricing copy is longer than the original template */
.pricing-grid{align-items:stretch;}
.pricing-card{height:auto;}
.pricing-card__price .amount{font-size:34px;letter-spacing:-.04em;}
.pricing-card__features li{align-items:flex-start;line-height:1.5;}
.pricing-card__features li svg{flex:0 0 auto;margin-top:3px;}
.pricing-toggle{gap:12px;}
.pricing-toggle__label em{font-style:normal;color:#28a86b;font-weight:700;margin-left:4px;}


.cta{max-width:920px;margin:0 auto;}
.cta h2{font-size:32px;}

@media (max-width: 900px){
  .hero__mark--left{left:-220px;width:300px}.hero__mark--right{right:-200px;width:260px}
  .hero__title{font-size:44px}
}
@media (max-width: 640px){
  .navbar__logo{width:110px}.navbar__logo img{width:102px}
  .hero__mark{display:none}
  .hero__title{font-size:34px}
  #tools .tools-card{padding:32px 20px}
  #tools .tools-grid{gap:14px}
  .social-icon{width:50px;height:50px;border-radius:13px}.social-icon i{font-size:22px}
  .pricing-card__price .amount{font-size:30px}
}


/* =========================================================
   PROJECTS NAV DROPDOWN
   ========================================================= */
.navbar__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar__nav-trigger {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-weight: inherit;
  line-height: 1;
  transition: color 0.15s ease;
}
.navbar__nav-trigger:hover,
.navbar__nav-item:focus-within .navbar__nav-trigger,
.navbar__nav-item.is-open .navbar__nav-trigger { color: var(--text-1); }

.navbar__nav-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar__nav-item:hover .navbar__nav-chevron,
.navbar__nav-item:focus-within .navbar__nav-chevron,
.navbar__nav-item.is-open .navbar__nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 130;
  width: 218px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 42px -22px rgba(16,15,10,.38), 0 6px 18px rgba(16,15,10,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 7px) scale(.985);
  transform-origin: top center;
  transition: opacity .17s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility .17s ease;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  height: 13px;
}
.navbar__nav-item:hover .nav-dropdown,
.navbar__nav-item:focus-within .nav-dropdown,
.navbar__nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.nav-dropdown a {
  width: 100%;
  min-height: 52px;
  padding: 9px 11px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  color: var(--text-1);
  transition: background .15s ease, transform .15s ease;
}
.nav-dropdown a + a { margin-top: 2px; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: #f4f4f2;
  transform: translateX(2px);
}
.nav-dropdown a span { font-size: 13px; font-weight: 650; }
.nav-dropdown a small { font-size: 11px; font-weight: 500; color: var(--text-3); }
.nav-dropdown a[aria-current="page"] { background: #f1f4ff; color: #3448d8; }

/* =========================================================
   PROJECT / RESULTS PAGES
   ========================================================= */
.page-shell { min-height: 100vh; }
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 24px 68px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
.page-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 500px;
  height: 500px;
  left: 50%;
  top: -360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71,89,245,.13) 0%, rgba(71,89,245,.04) 42%, transparent 72%);
  pointer-events: none;
}
.page-hero__eyebrow { margin-bottom: 22px; }
.page-hero h1 {
  max-width: 820px;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.page-hero p {
  max-width: 650px;
  margin-top: 20px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.65;
}
.page-hero__actions { margin-top: 30px; display: flex; gap: 10px; }

.project-section { padding: 72px 24px 88px; }
.project-section--soft { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.project-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}
.project-section__head h2 { font-size: 32px; line-height: 1.15; }
.project-section__head p { max-width: 500px; color: var(--text-2); font-size: 14.5px; }

.project-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.project-filter {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  color: var(--text-2);
  border-radius: var(--radius-full);
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 600;
  transition: .15s ease;
}
.project-filter:hover { border-color: #ceccc6; color: var(--text-1); }
.project-filter.is-active { background: var(--black); border-color: var(--black); color: #fff; }

.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.project-card {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #dad8d1; }
.project-card.is-hidden { display: none; }
.project-card__visual {
  position: relative;
  height: 310px;
  overflow: hidden;
  background: var(--project-bg, linear-gradient(145deg,#d8d4cb,#f7f6f2));
}
.project-card__visual::before,
.project-card__visual::after { content: ''; position: absolute; }
.project-card__visual::before {
  left: 8%; right: 8%; bottom: -9%; height: 58%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(145deg,rgba(255,255,255,.93),rgba(232,229,220,.88));
  box-shadow: 0 -28px 70px rgba(255,255,255,.2);
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom center;
}
.project-card__visual::after {
  width: 42%; height: 68%; right: 10%; top: 12%;
  border-radius: 4px 4px 14px 14px;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(130deg,rgba(255,255,255,.28),rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.05);
}
.project-card__visual .room-block { position: absolute; z-index: 2; border-radius: 8px; box-shadow: 0 18px 35px rgba(16,15,10,.13); }
.project-card__visual .room-block--sofa { left: 15%; bottom: 22%; width: 42%; height: 22%; background: var(--sofa,#d4c7b5); }
.project-card__visual .room-block--table { left: 46%; bottom: 16%; width: 20%; height: 9%; background: var(--table,#5b5147); border-radius: 50%; }
.project-card__visual .room-block--lamp { left: 11%; top: 18%; width: 6px; height: 44%; background: rgba(35,32,29,.68); border-radius: 6px; box-shadow: none; }
.project-card__visual .room-block--lamp::before { content:''; position:absolute; width:48px; height:28px; left:-21px; top:-8px; border-radius:50% 50% 8px 8px; background:rgba(238,226,203,.96); }
.project-card__mark { position: absolute; z-index: 1; width: 150px; left: -36px; top: -38px; opacity: .06; transform: rotate(-15deg); }
.project-card__body { padding: 21px 22px 23px; }
.project-card__meta { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em; font-weight: 650; }
.project-card__meta span + span::before { content:'•'; margin-right:8px; }
.project-card h3 { margin-top: 8px; font-size: 20px; }
.project-card p { margin-top: 7px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.project-card__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.project-card__link svg { transition: transform .15s ease; }
.project-card:hover .project-card__link svg { transform: translateX(3px); }

.project-note {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px dashed #d6d4ce;
  border-radius: 14px;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
  background: rgba(255,255,255,.38);
}

.result-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.result-stat { padding: 25px 20px; background: var(--white); border: 1px solid var(--border); border-radius: 18px; }
.result-stat strong { display:block; font-family:var(--font-display); font-variation-settings:'opsz' 32; font-size:32px; letter-spacing:-.04em; }
.result-stat span { display:block; margin-top:5px; color:var(--text-2); font-size:12.5px; }

.student-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.student-card { padding:22px; background:var(--white); border:1px solid var(--border); border-radius:18px; }
.student-card__top { display:flex; align-items:center; gap:12px; }
.student-avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#161616,#4a4a48); color:#fff; font-size:13px; font-weight:750; }
.student-card h3 { font-size:16px; }
.student-card__role { margin-top:2px; color:var(--text-3); font-size:11.5px; }
.student-card__work {
  position:relative; height:156px; overflow:hidden; margin-top:18px; border-radius:13px;
  background:var(--student-bg,linear-gradient(145deg,#c6c2b8,#eceae4));
}
.student-card__work::before { content:''; position:absolute; width:58%; height:47%; left:9%; bottom:14%; border-radius:8px; background:rgba(255,255,255,.78); box-shadow:0 20px 35px rgba(0,0,0,.1); }
.student-card__work::after { content:''; position:absolute; width:30%; height:72%; right:10%; top:8%; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); border-radius:8px; }
.student-card__work--image { background:#ecece8; }
.student-card__work--image::before,.student-card__work--image::after { display:none; }
.student-card__work--image img { width:100%; height:100%; display:block; object-fit:cover; }
.student-card__skills { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.student-card__skills span { padding:5px 8px; border-radius:999px; background:#f3f3f1; color:var(--text-2); font-size:10.5px; font-weight:600; }
.student-progress { margin-top:18px; }
.student-progress__label { display:flex; justify-content:space-between; gap:12px; color:var(--text-2); font-size:11.5px; }
.student-progress__track { height:6px; margin-top:8px; overflow:hidden; border-radius:999px; background:#e9e8e3; }
.student-progress__bar { height:100%; width:var(--progress,80%); border-radius:inherit; background:var(--black); }

.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.process-card { padding:24px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.64); }
.process-card__num { color:var(--text-3); font-size:11px; font-weight:700; }
.process-card h3 { margin-top:28px; font-size:18px; }
.process-card p { margin-top:8px; color:var(--text-2); font-size:13.5px; line-height:1.6; }

.page-cta { padding: 0 24px 88px; }
.page-cta__inner { max-width:900px; margin:0 auto; padding:52px 28px; text-align:center; border:1px solid var(--border); border-radius:26px; background:var(--white); }
.page-cta__inner h2 { font-size:31px; }
.page-cta__inner p { max-width:520px; margin:12px auto 0; color:var(--text-2); font-size:14px; }
.page-cta__inner .btn { margin-top:24px; }

@media (max-width: 900px) {
  .page-hero h1 { font-size: 44px; }
  .student-grid { grid-template-columns:1fr 1fr; }
  .result-stats { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .navbar__nav-item { width:100%; display:block; }
  .navbar__nav-trigger { width:100%; justify-content:space-between; padding:10px 0; line-height:1.5; }
  .navbar__nav-item:hover .nav-dropdown,
  .navbar__nav-item:focus-within .nav-dropdown {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .navbar__nav-item:hover .navbar__nav-chevron,
  .navbar__nav-item:focus-within .navbar__nav-chevron { transform:none; }
  .navbar__nav-item.is-open .navbar__nav-chevron { transform:rotate(180deg); }
  .navbar__nav-item.is-open .nav-dropdown {
    display:grid;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav-dropdown {
    display:none;
    position:static;
    width:100%;
    margin:0 0 7px 4px;
    padding:2px 0 2px 12px;
    border:0;
    border-left:1px solid var(--border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:none;
    opacity:1;
    visibility:visible;
  }
  .nav-dropdown::before { display:none; }
  .navbar.is-open .nav-dropdown a { min-height:44px; padding:7px 10px; width:100%; }
  .nav-dropdown a:hover,.nav-dropdown a:focus-visible { background:#f4f4f2; transform:none; }

  .page-hero { padding:64px 20px 52px; }
  .page-hero h1 { font-size:34px; }
  .page-hero p { font-size:14.5px; }
  .page-hero__actions { width:100%; max-width:300px; flex-direction:column; }
  .project-section { padding:56px 20px 68px; }
  .project-section__head { align-items:flex-start; flex-direction:column; margin-bottom:26px; }
  .project-section__head h2 { font-size:27px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card__visual { height:245px; }
  .student-grid,.result-stats,.process-grid { grid-template-columns:1fr; }
  .page-cta { padding:0 20px 68px; }
  .page-cta__inner { padding:40px 22px; }
  .page-cta__inner h2 { font-size:26px; }
}

/* =========================================================
   PORTFOLIO PAGE — MINIMAL SELECTED WORK LAYOUT
   ========================================================= */
.page-portfolio-minimal main {
  padding-top: 20px;
}

.portfolio-selected {
  padding: 40px 24px 56px;
}

.portfolio-selected__head,
.portfolio-all__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.portfolio-selected__head {
  margin-bottom: 22px;
}

.portfolio-selected__head h1 {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.portfolio-selected__link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  transition: opacity .15s ease;
}

.portfolio-selected__link:hover {
  opacity: .68;
}

.portfolio-masonry {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 26px;
  align-items: start;
}

.portfolio-masonry__column {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.portfolio-item {
  display: flex;
  flex-direction: column;
}

.portfolio-item__media {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #e9e8e5;
}

.portfolio-item--soft .portfolio-item__media {
  min-height: 268px;
}

.portfolio-item--tall .portfolio-item__media {
  min-height: 556px;
}

.portfolio-item--wide .portfolio-item__media {
  min-height: 240px;
}

.portfolio-item__hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.portfolio-item__hover svg {
  width: 38px;
  height: 38px;
  color: var(--black);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 11px;
  box-shadow: 0 10px 24px rgba(18,18,16,.14);
}

.portfolio-item__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  opacity: 0;
  transition: opacity .18s ease;
}

.portfolio-item__media:hover::after,
.portfolio-item__media:hover .portfolio-item__hover,
.portfolio-item__media:focus-visible::after,
.portfolio-item__media:focus-visible .portfolio-item__hover {
  opacity: 1;
}

.portfolio-item__content {
  padding-top: 10px;
}

.portfolio-item__content h2,
.portfolio-mini-card h3 {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.portfolio-item__content p,
.portfolio-mini-card p {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.45;
}

.portfolio-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #dad9d4;
}

.portfolio-visual::before,
.portfolio-visual::after {
  content: '';
  position: absolute;
}

.portfolio-visual--glass {
  background:
    radial-gradient(120px 120px at 82% 6%, rgba(174, 121, 255, .22), rgba(174,121,255,0) 60%),
    linear-gradient(180deg, #f1f1ef 0%, #ecebe8 100%);
}

.portfolio-visual--glass::before {
  width: 110%;
  height: 68%;
  left: -10%;
  top: 42%;
  border-radius: 120px;
  border: 10px solid rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(120,120,130,.12);
  transform: rotate(16deg);
}

.portfolio-visual--glass::after {
  width: 88%;
  height: 56%;
  right: -9%;
  top: -3%;
  border-radius: 100px;
  border: 10px solid rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px rgba(120,120,130,.12);
  transform: rotate(-8deg);
}

.portfolio-visual--glass {
  background-image:
    radial-gradient(145px 95px at 29% 89%, rgba(131, 84, 255, .65), rgba(131,84,255,0) 70%),
    radial-gradient(145px 95px at 77% 11%, rgba(131, 84, 255, .5), rgba(131,84,255,0) 60%),
    linear-gradient(180deg, #f1f1ef 0%, #ecebe8 100%);
}

.portfolio-visual--sky {
  background: linear-gradient(180deg, #ced8ea 0%, #dde5f2 36%, #f1f3f6 100%);
}

.portfolio-visual--sky::before {
  left: -10%;
  bottom: -18%;
  width: 120%;
  height: 76%;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,.52);
  border-top: 2px solid rgba(255,255,255,.95);
  transform: rotate(-5deg);
}

.portfolio-visual--sky::after {
  left: 14%;
  bottom: 36%;
  width: 48%;
  height: 20%;
  border-radius: 60% 60% 0 0;
  background: rgba(247, 238, 214, .86);
  filter: blur(.2px);
}

.portfolio-visual--sand {
  background:
    radial-gradient(180px 100px at 80% 20%, rgba(255,255,255,.38), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, #c4b6a6 0%, #dccdbd 48%, #eee6db 100%);
}

.portfolio-visual--sand::before {
  width: 82%;
  height: 52%;
  left: -8%;
  bottom: 6%;
  border-radius: 60px;
  background: rgba(255,255,255,.18);
  transform: rotate(-13deg);
}

.portfolio-visual--sand::after {
  width: 36%;
  height: 22%;
  right: 12%;
  bottom: 17%;
  border-radius: 999px;
  background: rgba(112, 79, 55, .25);
}

.portfolio-visual--violet {
  background:
    linear-gradient(180deg, #090909 0%, #030303 100%);
}

.portfolio-visual--violet::before,
.portfolio-visual--violet::after {
  inset: auto;
  border-radius: 999px;
  filter: blur(.2px);
}

.portfolio-visual--violet::before {
  width: 115%;
  height: 64%;
  left: -9%;
  top: -6%;
  background:
    radial-gradient(circle at 15% 12%, rgba(221,117,255,.95), rgba(221,117,255,0) 40%),
    linear-gradient(150deg, rgba(215,145,255,.95) 0%, rgba(17,17,20,.1) 48%, rgba(17,17,20,0) 50%);
  box-shadow:
    0 0 0 25px rgba(38, 26, 59, .6) inset,
    0 0 0 55px rgba(14, 14, 16, .95) inset;
  transform: rotate(-23deg) translateY(-6%);
}

.portfolio-visual--violet::after {
  width: 122%;
  height: 74%;
  left: -14%;
  bottom: -8%;
  background:
    radial-gradient(circle at 47% 28%, rgba(36,76,255,.92), rgba(36,76,255,0) 18%),
    linear-gradient(152deg, rgba(238,164,255,.95) 0%, rgba(52, 27, 78, .9) 24%, rgba(7,7,10,.98) 58%);
  box-shadow:
    0 0 0 22px rgba(25, 20, 39, .78) inset,
    0 0 0 52px rgba(8, 8, 12, .98) inset;
  transform: rotate(-21deg) translateY(10%);
}

.portfolio-visual--midnight {
  background:
    linear-gradient(180deg, #0d1018 0%, #05070c 100%);
}

.portfolio-visual--midnight::before {
  width: 115%;
  height: 115%;
  left: -8%;
  top: -30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(101, 141, 255, .68), rgba(101,141,255,0) 28%);
}

.portfolio-visual--midnight::after {
  width: 70%;
  height: 6px;
  left: 15%;
  bottom: 28%;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

.portfolio-all {
  padding: 14px 24px 80px;
}

.portfolio-all__head {
  margin-bottom: 24px;
}

.portfolio-all__head h2 {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.1;
}

.portfolio-all__head p {
  max-width: 460px;
  color: var(--text-2);
  font-size: 14px;
}

.portfolio-all__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.portfolio-mini-card {
  display: block;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.portfolio-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #dad8d2;
}

.portfolio-mini-card .portfolio-visual {
  position: relative;
  min-height: 180px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.portfolio-visual--pearl {
  background: linear-gradient(145deg, #ddd9d1 0%, #efede8 65%, #f7f7f5 100%);
}
.portfolio-visual--pearl::before {
  left: 10%; top: 18%; width: 80%; height: 48%; border-radius: 48px; background: rgba(255,255,255,.5);
}
.portfolio-visual--pearl::after {
  left: 22%; bottom: 16%; width: 54%; height: 14%; border-radius: 999px; background: rgba(125,123,118,.18);
}

.portfolio-visual--forest {
  background: linear-gradient(145deg, #788275 0%, #b0b8a9 50%, #ecefe7 100%);
}
.portfolio-visual--forest::before {
  left: -8%; bottom: 8%; width: 85%; height: 38%; border-radius: 44px; background: rgba(255,255,255,.16); transform: rotate(-10deg);
}
.portfolio-visual--forest::after {
  right: 12%; top: 18%; width: 18%; height: 54%; border-radius: 999px; background: rgba(47,55,43,.18);
}

.portfolio-visual--ember {
  background: linear-gradient(145deg, #65544a 0%, #b89377 54%, #efe2d5 100%);
}
.portfolio-visual--ember::before {
  left: 16%; top: 14%; width: 68%; height: 28%; border-radius: 999px; background: rgba(255,255,255,.15);
}
.portfolio-visual--ember::after {
  left: 20%; bottom: 18%; width: 58%; height: 24%; border-radius: 18px; background: rgba(58,40,31,.22);
}

.portfolio-visual--mist {
  background: linear-gradient(145deg, #bcc7d6 0%, #dce2ea 52%, #f3f5f7 100%);
}
.portfolio-visual--mist::before {
  left: -6%; bottom: -8%; width: 112%; height: 44%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.46);
}
.portfolio-visual--mist::after {
  left: 16%; top: 16%; width: 28%; height: 15%; border-radius: 999px; background: rgba(247,235,210,.9);
}

@media (max-width: 1024px) {
  .portfolio-all__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .portfolio-selected {
    padding-top: 26px;
  }

  .portfolio-selected__head,
  .portfolio-all__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .portfolio-masonry {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .portfolio-item--soft .portfolio-item__media,
  .portfolio-item--wide .portfolio-item__media,
  .portfolio-item--tall .portfolio-item__media {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .portfolio-selected,
  .portfolio-all {
    padding-left: 20px;
    padding-right: 20px;
  }

  .portfolio-selected__head h1 {
    font-size: 20px;
  }

  .portfolio-item__content h2,
  .portfolio-mini-card h3 {
    font-size: 13px;
  }

  .portfolio-all__head h2 {
    font-size: 24px;
  }

  .portfolio-all__grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PROJECT DETAIL PAGES
   ========================================================= */
.project-detail-page main {
  padding-top: 8px;
}

.project-detail-hero {
  padding: 42px 24px 22px;
  text-align: center;
}

.project-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
  transition: color .15s ease;
}

.project-detail__back:hover {
  color: var(--text-1);
}

.project-detail-hero h1 {
  font-size: 50px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.project-detail__meta {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}

.project-detail-cover {
  padding: 0 24px;
}

.project-detail-cover + .project-detail-cover {
  margin-top: 18px;
}

.project-detail-image {
  position: relative;
  min-height: 520px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9e8e5;
}

.project-detail-image::before,
.project-detail-image::after {
  content: '';
  position: absolute;
}

.project-detail-section {
  padding: 44px 24px 10px;
}

.project-detail-section--compact {
  padding-top: 30px;
}

.project-detail-section__inner {
  max-width: 920px;
  margin: 0 auto;
}

.project-detail-section h2 {
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 16px;
}

.project-detail-section p {
  max-width: 920px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.project-detail-summary {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

.project-detail-facts {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 6px;
  box-shadow: var(--shadow-card);
}

.project-detail-facts li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}

.project-detail-facts li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.project-detail-facts span {
  color: var(--text-3);
  font-weight: 500;
}

.project-detail-facts strong {
  color: var(--text-1);
  font-weight: 600;
  text-align: right;
}

.project-detail-next {
  padding: 44px 24px 84px;
}

.project-detail-next__card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: var(--shadow-card);
}

.project-detail-next__copy small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  margin-bottom: 8px;
}

.project-detail-next__copy h3 {
  font-size: 26px;
  line-height: 1.08;
  margin-bottom: 8px;
}

.project-detail-next__copy p {
  color: var(--text-2);
  font-size: 14px;
}

.project-detail-next__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.project-detail-image--glass {
  background-image:
    radial-gradient(280px 180px at 18% 92%, rgba(131, 84, 255, .88), rgba(131,84,255,0) 70%),
    radial-gradient(260px 140px at 72% 6%, rgba(131, 84, 255, .62), rgba(131,84,255,0) 65%),
    linear-gradient(180deg, #ededee 0%, #e6e5e8 100%);
}
.project-detail-image--glass::before {
  width: 104%; height: 64%; left: -8%; top: 52%; border-radius: 180px; border: 12px solid rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(120,120,130,.12); transform: rotate(13deg);
}
.project-detail-image--glass::after {
  width: 72%; height: 54%; right: -3%; top: 24%; border-radius: 130px; border: 12px solid rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(120,120,130,.12); transform: rotate(8deg);
}

.project-detail-image--sky {
  background: linear-gradient(180deg, #cfd8ea 0%, #dbe4f0 38%, #f4f5f7 100%);
}
.project-detail-image--sky::before { left: -8%; bottom: -16%; width: 112%; height: 62%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.48); border-top: 2px solid rgba(255,255,255,.95); transform: rotate(-5deg); }
.project-detail-image--sky::after { left: 25%; bottom: 36%; width: 24%; height: 10%; border-radius: 999px; background: rgba(250, 241, 218, .95); }

.project-detail-image--sand {
  background: linear-gradient(145deg, #c6b8a7 0%, #dccdbc 48%, #eee5da 100%);
}
.project-detail-image--sand::before { width: 76%; height: 46%; left: -4%; bottom: 6%; border-radius: 62px; background: rgba(255,255,255,.16); transform: rotate(-12deg); }
.project-detail-image--sand::after { width: 28%; height: 18%; right: 15%; bottom: 18%; border-radius: 999px; background: rgba(112,79,55,.26); }

.project-detail-image--violet {
  background: linear-gradient(180deg, #090909 0%, #040406 100%);
}
.project-detail-image--violet::before {
  width: 118%; height: 64%; left: -11%; top: -6%; border-radius: 999px; background: radial-gradient(circle at 12% 10%, rgba(222,125,255,.96), rgba(222,125,255,0) 34%), linear-gradient(150deg, rgba(216,147,255,.95) 0%, rgba(15,15,20,.14) 46%, rgba(15,15,20,0) 50%); box-shadow: 0 0 0 28px rgba(40, 24, 64, .58) inset, 0 0 0 64px rgba(10,10,12,.98) inset; transform: rotate(-22deg) translateY(-4%);
}
.project-detail-image--violet::after {
  width: 120%; height: 76%; left: -14%; bottom: -8%; border-radius: 999px; background: radial-gradient(circle at 49% 28%, rgba(36,76,255,.95), rgba(36,76,255,0) 16%), linear-gradient(153deg, rgba(238,164,255,.95) 0%, rgba(56,31,80,.9) 22%, rgba(7,7,10,.99) 58%); box-shadow: 0 0 0 24px rgba(25,20,39,.8) inset, 0 0 0 58px rgba(8,8,12,.98) inset; transform: rotate(-21deg) translateY(10%);
}

.project-detail-image--midnight {
  background: linear-gradient(180deg, #0d1018 0%, #05070c 100%);
}
.project-detail-image--midnight::before { width: 100%; height: 110%; left: 0; top: -28%; border-radius: 50%; background: radial-gradient(circle at 50% 48%, rgba(103, 140, 255, .78), rgba(103,140,255,0) 25%); }
.project-detail-image--midnight::after { width: 72%; height: 6px; left: 14%; bottom: 28%; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

.project-detail-image--pearl { background: linear-gradient(145deg, #ddd8d0 0%, #efede8 64%, #f7f7f5 100%); }
.project-detail-image--pearl::before { left: 10%; top: 18%; width: 80%; height: 48%; border-radius: 58px; background: rgba(255,255,255,.52); }
.project-detail-image--pearl::after { left: 22%; bottom: 16%; width: 54%; height: 14%; border-radius: 999px; background: rgba(125,123,118,.18); }

.project-detail-image--forest { background: linear-gradient(145deg, #788275 0%, #b1b8a9 52%, #ecefe7 100%); }
.project-detail-image--forest::before { left: -6%; bottom: 10%; width: 84%; height: 38%; border-radius: 46px; background: rgba(255,255,255,.16); transform: rotate(-10deg); }
.project-detail-image--forest::after { right: 12%; top: 18%; width: 18%; height: 54%; border-radius: 999px; background: rgba(47,55,43,.18); }

.project-detail-image--ember { background: linear-gradient(145deg, #65544a 0%, #b89478 54%, #efe2d5 100%); }
.project-detail-image--ember::before { left: 16%; top: 14%; width: 68%; height: 28%; border-radius: 999px; background: rgba(255,255,255,.15); }
.project-detail-image--ember::after { left: 20%; bottom: 18%; width: 58%; height: 24%; border-radius: 18px; background: rgba(58,40,31,.22); }

.project-detail-image--mist { background: linear-gradient(145deg, #bcc7d6 0%, #dce2ea 52%, #f3f5f7 100%); }
.project-detail-image--mist::before { left: -6%; bottom: -8%; width: 112%; height: 44%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.46); }
.project-detail-image--mist::after { left: 16%; top: 16%; width: 28%; height: 15%; border-radius: 999px; background: rgba(247,235,210,.9); }

@media (max-width: 900px) {
  .project-detail-hero h1 { font-size: 40px; }
  .project-detail-image { min-height: 420px; }
  .project-detail-summary { grid-template-columns: 1fr; }
  .project-detail-next__card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .project-detail-hero { padding-left: 20px; padding-right: 20px; }
  .project-detail-cover,
  .project-detail-section,
  .project-detail-next { padding-left: 20px; padding-right: 20px; }
  .project-detail-hero h1 { font-size: 31px; }
  .project-detail-image { min-height: 270px; }
  .project-detail-section h2 { font-size: 20px; }
}


/* =========================================================
   BLOG DETAIL PAGE
   ========================================================= */
.blog-page main {
  padding-top: 8px;
}

.blog-hero {
  max-width: 820px;
  padding: 42px 24px 18px;
  text-align: center;
}

.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.blog-hero h1 {
  margin-top: 20px;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.blog-hero__excerpt {
  margin: 22px auto 0;
  max-width: 700px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
}

.blog-hero__meta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text-2);
  font-size: 13px;
}

.blog-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-cover {
  padding: 0 24px;
}

.blog-cover__image {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative;
  background-color: #ebe8e1;
}

.blog-cover__image--main {
  min-height: 560px;
  background:
    radial-gradient(260px 180px at 52% 34%, rgba(253,228,179,.95), rgba(253,228,179,0) 48%),
    radial-gradient(360px 240px at 51% 18%, rgba(204,118,54,.95), rgba(204,118,54,0) 46%),
    radial-gradient(190px 140px at 36% 16%, rgba(126,75,39,.8), rgba(126,75,39,0) 58%),
    radial-gradient(190px 140px at 67% 18%, rgba(126,75,39,.75), rgba(126,75,39,0) 58%),
    radial-gradient(190px 240px at 52% 64%, rgba(86,129,121,.28), rgba(86,129,121,0) 54%),
    linear-gradient(180deg, #060708 0%, #07090c 100%);
}

.blog-cover__image--main::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  width: 54%;
  height: 52%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 54%, rgba(255,240,214,.88), rgba(255,240,214,0) 46%);
  filter: blur(8px);
}

.blog-cover__image--main::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  width: 46%;
  height: 48%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(231,168,89,.28) 0%, rgba(231,168,89,0) 70%);
}

.blog-content {
  padding: 36px 24px 0;
}

.blog-content__inner {
  max-width: 760px;
  margin: 0 auto;
}

.blog-content__inner h2 {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}

.blog-content__inner p,
.blog-content__inner li {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.82;
}

.blog-content__inner p + p,
.blog-content__inner ul,
.blog-content__inner blockquote,
.blog-content__inner .blog-inline-visual,
.blog-content__inner h2 {
  margin-top: 22px;
}

.blog-content__inner ul {
  padding-left: 20px;
}

.blog-content__inner li + li {
  margin-top: 8px;
}

.blog-content__inner blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 18px 0 18px 18px;
  border-left: 3px solid #161616;
  font-size: 22px;
  line-height: 1.6;
  color: var(--text-1);
}

.blog-content__inner blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-2);
  font-style: normal;
}

.blog-inline-visual {
  margin-bottom: 2px;
}

.blog-cover__image--secondary {
  min-height: 320px;
  background:
    radial-gradient(220px 180px at 54% 40%, rgba(64,87,255,.98), rgba(64,87,255,0) 44%),
    radial-gradient(220px 180px at 38% 58%, rgba(206,215,255,.72), rgba(206,215,255,0) 46%),
    linear-gradient(145deg, #f3f4f7 0%, #e8edf6 48%, #f9fbff 100%);
}

.blog-cover__image--secondary::before {
  content: '';
  position: absolute;
  left: -6%;
  top: -8%;
  width: 54%;
  height: 136%;
  border-radius: 44px;
  background: rgba(255,255,255,.5);
  transform: rotate(26deg);
}

.blog-cover__image--secondary::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -16%;
  width: 48%;
  height: 110%;
  border-radius: 44px;
  background: rgba(90, 117, 255, .16);
  transform: rotate(-26deg);
}

.blog-cta {
  padding: 44px 24px 86px;
}

.blog-cta__card {
  max-width: 960px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow-card);
}

.blog-cta__card h3 {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.12;
}

.blog-cta__card p {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
  max-width: 560px;
}

.blog-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .blog-hero h1 {
    font-size: 42px;
  }

  .blog-cover__image--main {
    min-height: 420px;
  }

  .blog-cta__card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .blog-hero,
  .blog-cover,
  .blog-content,
  .blog-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .blog-hero {
    padding-top: 28px;
  }

  .blog-hero h1 {
    font-size: 30px;
  }

  .blog-hero__excerpt,
  .blog-content__inner p,
  .blog-content__inner li {
    font-size: 14px;
  }

  .blog-content__inner h2 {
    font-size: 28px;
  }

  .blog-cover__image--main {
    min-height: 280px;
    border-radius: 14px;
  }

  .blog-cover__image--secondary {
    min-height: 220px;
    border-radius: 14px;
  }

  .blog-content__inner blockquote {
    font-size: 18px;
  }

  .blog-cta__card h3 {
    font-size: 24px;
  }
}


/* =========================================================
   BLOG LISTING PAGE
   ========================================================= */
.blog-listing-page main { padding-top: 0; }

.blog-index {
  padding: 58px 24px 72px;
}

.blog-index__intro {
  max-width: 650px;
  margin: 0 auto 38px;
  text-align: center;
}

.blog-index__intro h1 {
  margin-top: 16px;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.blog-index__intro p {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.blog-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: #dad7d1;
}

.blog-card__image {
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #101115;
}

.blog-card__image::before,
.blog-card__image::after {
  content: '';
  position: absolute;
}

.blog-card__image--flower {
  background:
    radial-gradient(170px 110px at 53% 24%, rgba(255,221,167,.97), rgba(255,221,167,0) 48%),
    radial-gradient(230px 150px at 50% 8%, rgba(201,103,48,.95), rgba(201,103,48,0) 54%),
    radial-gradient(200px 180px at 40% 90%, rgba(82,121,126,.65), rgba(82,121,126,0) 55%),
    linear-gradient(180deg, #08090b 0%, #080a0d 100%);
}
.blog-card__image--flower::before { left: 18%; bottom: -10%; width: 42%; height: 48%; border-radius: 58% 42% 60% 40%; background: rgba(204,225,227,.25); transform: rotate(18deg); filter: blur(5px); }
.blog-card__image--flower::after { right: 12%; bottom: -6%; width: 38%; height: 44%; border-radius: 48%; background: rgba(86,137,150,.28); filter: blur(6px); }

.blog-card__image--blur {
  background:
    radial-gradient(230px 120px at 50% 55%, rgba(241,217,211,.48), rgba(241,217,211,0) 55%),
    radial-gradient(190px 100px at 25% 52%, rgba(70,51,66,.8), rgba(70,51,66,0) 60%),
    radial-gradient(190px 110px at 80% 48%, rgba(129,91,95,.72), rgba(129,91,95,0) 55%),
    linear-gradient(180deg, #17171a 0%, #09090b 100%);
  filter: saturate(.92);
}
.blog-card__image--blur::before { inset: 20% -10% 12%; border-radius: 50%; background: rgba(255,255,255,.08); filter: blur(30px); }

.blog-card__image--petal {
  background:
    radial-gradient(130px 110px at 52% 52%, rgba(255,217,166,.66), rgba(255,217,166,0) 60%),
    radial-gradient(150px 130px at 28% 34%, rgba(128,191,177,.55), rgba(128,191,177,0) 62%),
    radial-gradient(170px 120px at 77% 38%, rgba(184,111,80,.68), rgba(184,111,80,0) 58%),
    linear-gradient(145deg, #111416 0%, #17100f 100%);
}
.blog-card__image--petal::before { left: 27%; top: 14%; width: 42%; height: 68%; border-radius: 60% 40% 55% 45%; background: rgba(244,226,200,.22); transform: rotate(-16deg); filter: blur(6px); }

.blog-card__body { padding: 14px 2px 2px; }
.blog-card__category { color: var(--text-2); font-size: 12px; margin: 0 0 8px; }
.blog-card h2 { font-size: 20px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; min-height: 69px; }
.blog-card__foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 12.5px; }
.blog-card__arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; color: var(--text-1); transition: transform .2s ease, background .2s ease; }
.blog-card:hover .blog-card__arrow { transform: translateX(2px); background: #e7e5e1; }
.blog-index__more { display: flex; justify-content: center; margin-top: 34px; }
.blog-index__more .btn[disabled] { opacity: .92; cursor: default; }

@media (max-width: 900px) {
  .blog-card-grid { grid-template-columns: 1fr 1fr; }
  .blog-index__intro h1 { font-size: 36px; }
}
@media (max-width: 640px) {
  .blog-index { padding: 34px 20px 56px; }
  .blog-index__intro { margin-bottom: 26px; }
  .blog-index__intro h1 { font-size: 30px; }
  .blog-card-grid { grid-template-columns: 1fr; }
  .blog-card__image { height: 220px; }
  .blog-card h2 { min-height: auto; font-size: 19px; }
}


/* =========================================================
   PROJECT COMMENTS
   ========================================================= */
.project-comments {
  padding: 8px 24px 74px;
}

.project-comments__inner {
  max-width: 920px;
  margin: 0 auto;
}

.project-comments__topline {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin-bottom: 30px;
}

.project-comments__inner h2 {
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.project-comments__empty-note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 20px;
}

.project-comments__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.project-comment {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
}

.project-comment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.project-comment__author {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}

.project-comment__date {
  color: var(--text-3);
  font-size: 12px;
}

.project-comment__text {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.project-comments__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-comments__textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 12px;
  border: 1.5px solid #8f8f8f;
  background: transparent;
  padding: 16px 14px;
  font: inherit;
  color: var(--text-1);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.project-comments__textarea::placeholder {
  color: #9d9d9d;
}

.project-comments__textarea:focus {
  border-color: #6c6c6c;
  box-shadow: 0 0 0 4px rgba(17,17,17,.05);
}

.project-comments__actions {
  display: flex;
  justify-content: flex-end;
}

.project-comments__submit {
  background: #8f8f8f;
  color: #fff;
  border: none;
  min-width: 132px;
  justify-content: center;
  box-shadow: none;
}

.project-comments__submit:hover {
  background: #777;
}

.project-comments__submit:disabled {
  opacity: .72;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .project-comments {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
  }

  .project-comments__inner h2 {
    font-size: 26px;
  }

  .project-comment__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .project-comments__submit {
    width: 100%;
  }
}

/* Navbar Masterklass accent — matched to the blue arrow button (#3546D6) */
.navbar__nav > a[href$="masterclass.html"],
.navbar__nav > a[href$="masterclass.html"]:hover,
.navbar__nav > a[href$="masterclass.html"]:focus-visible,
.navbar__nav > a[href$="#pricing"],
.navbar__nav > a[href$="#pricing"]:hover,
.navbar__nav > a[href$="#pricing"]:focus-visible {
  color: #3546D6;
}

/* Dynamic blog content */
.blog-card__image--uploaded { width:100%; height:260px; object-fit:cover; display:block; }
.blog-card__image--dynamic { display:grid; place-items:center; font-size:34px; color:#3546d6; background:linear-gradient(145deg,#eceef7,#d9dcf4); }
.blog-dynamic-cover { width:100%; max-height:680px; object-fit:cover; display:block; border-radius:2px; }
@media (max-width: 680px) { .blog-card__image--uploaded { height:220px; } }


/* Navbar login icon */
.navbar__login-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-1) !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
.navbar__login-icon:hover {
  background: var(--white);
  border-color: #c9c7c1;
  transform: translateY(-1px);
}
.navbar__login-icon svg { width: 18px; height: 18px; flex: 0 0 18px; }
.navbar__login-label { display: none; }

@media (max-width: 760px) {
  .navbar.is-open .navbar__nav .navbar__login-icon {
    width: 100% !important;
    height: 44px;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 10px 0 !important;
  }
  .navbar__login-label { display: inline; }
}


/* Dynamic portfolio projects managed from admin */
.portfolio-dynamic-grid { display: contents; }
.portfolio-mini-card__media { position: relative; height: 180px; overflow: hidden; border-radius: 12px; margin-bottom: 12px; background: #e9e8e5; }
.portfolio-mini-card__media img, .portfolio-mini-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-mini-card__media--empty { display: grid; place-items: center; background: linear-gradient(145deg,#ecebea,#d9d7d2); color: #7e7b74; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.portfolio-video-badge { position: absolute; right: 9px; bottom: 9px; z-index: 2; display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 9px; background: rgba(12,12,12,.82); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(8px); }
.portfolio-detail-real-media { overflow: hidden; border-radius: 8px; background: #ecebea; }
.portfolio-detail-real-media img { display: block; width: 100%; max-height: 900px; object-fit: cover; }
.portfolio-detail-video { overflow: hidden; border-radius: 8px; background: #080808; }
.portfolio-detail-video video { display: block; width: 100%; max-height: 820px; background: #000; }
.portfolio-detail-copy { color: var(--text-2); font-size: 16px; line-height: 1.85; }
.portfolio-detail-copy p + p { margin-top: 18px; }
.portfolio-detail-external { margin-top: 24px; width: auto; }
@media (max-width:640px) { .portfolio-mini-card__media { height: 200px; } .portfolio-detail-copy { font-size: 15px; } }

/* Admin-managed portfolio/blog listing cleanup */
.portfolio-item__image,
.portfolio-item__video,
.portfolio-item__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.portfolio-item__image,
.portfolio-item__video {
  display: block;
  object-fit: cover;
}
.portfolio-item__placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ecebea, #d9d7d2);
  color: #7e7b74;
}
.portfolio-item__placeholder span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.portfolio-item__media .portfolio-video-badge {
  z-index: 3;
}
.portfolio-masonry--single {
  grid-template-columns: minmax(0, .95fr);
}
.portfolio-empty-state,
.blog-empty-state {
  margin: 28px 0 0;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
  background: rgba(255,255,255,.45);
}
.blog-empty-state {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) {
  .portfolio-masonry--single { grid-template-columns: 1fr; }
}

/* =========================================================
   HOME — admin-managed portfolio slider
   ========================================================= */
.home-portfolio {
  width: 100%;
  max-width: 900px;
  margin-top: 48px;
  text-align: left;
}

.home-portfolio[hidden] { display: none !important; }

.home-portfolio__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.home-portfolio__heading {
  min-width: 0;
}

.home-portfolio__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-portfolio__heading h2 {
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-portfolio__controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.home-portfolio__arrow {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--text-1);
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.home-portfolio__arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--white);
  border-color: #c9c7c1;
}

.home-portfolio__arrow:active:not(:disabled) { transform: translateY(0); }
.home-portfolio__arrow:disabled { opacity: .35; cursor: default; }
.home-portfolio__arrow svg { width: 18px; height: 18px; }

.home-portfolio__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  border-radius: 18px;
  -webkit-overflow-scrolling: touch;
}

.home-portfolio__viewport::-webkit-scrollbar { display: none; }

.home-portfolio__track {
  display: flex;
  gap: 14px;
  width: max-content;
  min-width: 100%;
}

.home-portfolio__card {
  width: clamp(285px, 43vw, 424px);
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.home-portfolio__card-link {
  display: block;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(16,15,10,.035);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-portfolio__card-link:hover {
  transform: translateY(-3px);
  background: var(--white);
  border-color: #d8d6d1;
  box-shadow: 0 18px 40px -30px rgba(16,15,10,.38);
}

.home-portfolio__media {
  position: relative;
  height: 236px;
  overflow: hidden;
  border-radius: 13px;
  background: #e9e8e5;
}

.home-portfolio__media > img,
.home-portfolio__media > video,
.home-portfolio__placeholder {
  width: 100%;
  height: 100%;
}

.home-portfolio__media > img,
.home-portfolio__media > video {
  display: block;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.75,.25,1);
}

.home-portfolio__card-link:hover .home-portfolio__media > img,
.home-portfolio__card-link:hover .home-portfolio__media > video {
  transform: scale(1.025);
}

.home-portfolio__placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#ecebea,#d9d7d2);
  color: #7e7b74;
}

.home-portfolio__placeholder span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.home-portfolio__video-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  border-radius: var(--radius-full);
  padding: 6px 9px;
  background: rgba(12,12,12,.78);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.home-portfolio__open {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.88);
  color: var(--text-1);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  transform: translateY(-3px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.home-portfolio__card-link:hover .home-portfolio__open {
  opacity: 1;
  transform: translateY(0);
}

.home-portfolio__open svg { width: 17px; height: 17px; }

.home-portfolio__meta {
  min-height: 104px;
  padding: 13px 8px 9px;
}

.home-portfolio__category {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 10.5px;
}

.home-portfolio__meta h3 {
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.home-portfolio__meta p {
  margin-top: 5px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-portfolio__status {
  padding: 28px 18px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--text-3);
  background: rgba(255,255,255,.42);
  text-align: center;
  font-size: 13px;
}

/* Chat mockup comes first; portfolio slider follows it. */
.hero .mockup + .home-portfolio { margin-top: 34px; }

@media (max-width: 760px) {
  .home-portfolio { margin-top: 38px; }
  .home-portfolio__head { margin-bottom: 13px; }
  .home-portfolio__heading h2 { font-size: 21px; }
  .home-portfolio__arrow { width: 36px; height: 36px; }
  .home-portfolio__track { gap: 10px; }
  .home-portfolio__card { width: min(82vw, 350px); }
  .home-portfolio__media { height: 205px; }
  .home-portfolio__meta { min-height: 98px; }
  .home-portfolio__open { opacity: 1; transform: none; width: 32px; height: 32px; }
  .hero .mockup + .home-portfolio { margin-top: 30px; }
}

@media (max-width: 480px) {
  .home-portfolio__card { width: calc(100vw - 68px); }
  .home-portfolio__media { height: 190px; }
  .home-portfolio__heading h2 { font-size: 20px; }
}

/* =========================================================
   STUDENT RESULTS — DIRECTORY + INDIVIDUAL DETAIL
   ========================================================= */
.student-directory-section {
  padding: 88px 0 104px;
  background: #f5f5f3;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.student-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: 64px;
  align-items: end;
}
.student-directory-head h2 {
  margin-top: 16px;
  max-width: 660px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .98;
  letter-spacing: -.045em;
}
.student-directory-head > p {
  max-width: 470px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}
.student-directory-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding: 0 0 16px;
  border-bottom: 1px solid #d7d7d2;
}
.student-directory-count {
  color: var(--black);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.student-directory-hint {
  color: var(--text-3);
  font-size: 11.5px;
}
.student-directory { display: block; }
.student-directory-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(215px, 1.05fr) minmax(150px, .72fr) minmax(170px, .95fr) 168px 128px;
  gap: 24px;
  align-items: center;
  min-height: 142px;
  padding: 22px 0;
  border-bottom: 1px solid #d7d7d2;
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease;
}
.student-directory-row::before {
  content: '';
  position: absolute;
  inset: 8px -18px;
  z-index: 0;
  border-radius: 20px;
  background: #fff;
  opacity: 0;
  transform: scale(.992);
  box-shadow: 0 18px 46px rgba(20,20,18,.055);
  transition: opacity .22s ease, transform .22s ease;
}
.student-directory-row > * { position: relative; z-index: 1; }
.student-directory-row:hover::before,
.student-directory-row:focus-visible::before { opacity: 1; transform: scale(1); }
.student-directory-row:focus-visible { outline: none; }
.student-directory-index {
  color: #a9a9a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.student-directory-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.student-directory-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171715;
  color: #fff;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
}
.student-directory-person h3 {
  overflow: hidden;
  color: var(--black);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-directory-person p {
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-directory-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.student-directory-progress__top span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.student-directory-progress__top span svg { width: 14px; height: 14px; }
.student-directory-progress__top strong { font-size: 12px; }
.student-directory-progress__track {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #deded9;
}
.student-directory-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #141412;
}
.student-directory-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.student-directory-skills span {
  padding: 5px 8px;
  border: 1px solid #e0e0db;
  border-radius: 999px;
  color: #686864;
  background: rgba(255,255,255,.5);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.student-directory-visual {
  width: 168px;
  height: 96px;
  overflow: hidden;
  border-radius: 12px;
  background: #e7e7e1;
}
.student-directory-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s ease; }
.student-directory-row:hover .student-directory-visual img { transform: scale(1.035); }
.student-directory-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg,#dddcd5,#f0efea); }
.student-directory-placeholder span { color: #85857f; font-size: 18px; font-weight: 750; }
.student-directory-open {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: var(--black);
  font-size: 11.5px;
  font-weight: 700;
}
.student-directory-open svg { width: 18px; height: 18px; transition: transform .2s ease; }
.student-directory-row:hover .student-directory-open svg { transform: translateX(4px); }

/* Student individual result */
.page-student-detail main { min-height: 58vh; }
/* `hidden` must always win over component display rules. */
.student-detail-loading[hidden],
.student-detail-error[hidden],
#studentDetailContent[hidden] {
  display: none !important;
}
.student-detail-loading {
  min-height: 64vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--text-3);
  font-size: 12px;
}
.student-detail-loading__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #dddcd7;
  border-top-color: #171715;
  border-radius: 50%;
  animation: studentSpin .75s linear infinite;
}
@keyframes studentSpin { to { transform: rotate(360deg); } }
.student-detail-error {
  max-width: 620px;
  min-height: 62vh;
  margin: 0 auto;
  padding: 110px 24px;
  text-align: center;
}
.student-detail-error__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
}
.student-detail-error__icon svg { width: 23px; height: 23px; }
.student-detail-error h1 { font-size: 42px; }
.student-detail-error p { margin: 12px auto 0; color: var(--text-2); line-height: 1.65; }
.student-detail-error .btn { margin-top: 26px; }

.student-detail-hero {
  padding: 70px 0 90px;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.025), transparent 29%),
    #f6f6f4;
  border-bottom: 1px solid var(--border);
}
.student-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(460px, 1.17fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: center;
}
.student-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 58px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.student-detail-back svg { width: 18px; height: 18px; transition: transform .18s ease; }
.student-detail-back:hover svg { transform: translateX(-3px); }
.student-detail-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.student-detail-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #171715; }
.student-detail-personline { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.student-detail-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171715;
  color: #fff;
  font-size: 13px;
  font-weight: 780;
}
.student-detail-personline__label { color: #a0a09a; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.student-detail-personline__role { margin-top: 5px; color: var(--text-2); font-size: 12px; }
.student-detail-copy h1 {
  max-width: 600px;
  margin-top: 28px;
  font-size: clamp(54px, 6.4vw, 88px);
  line-height: .9;
  letter-spacing: -.058em;
}
.student-detail-lede {
  max-width: 510px;
  margin-top: 24px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.72;
}
.student-detail-quickstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 40px;
}
.student-detail-quickstat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid #d7d7d2;
}
.student-detail-quickstat__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
}
.student-detail-quickstat__icon svg { width: 17px; height: 17px; }
.student-detail-quickstat span { display: block; color: var(--text-3); font-size: 9.5px; }
.student-detail-quickstat strong { display: block; overflow: hidden; margin-top: 3px; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

.student-detail-media {
  overflow: hidden;
  border: 1px solid #d8d8d2;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(30,30,26,.08);
}
.student-detail-media__top,
.student-detail-media__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.student-detail-media__top { min-height: 58px; padding: 0 18px 0 22px; border-bottom: 1px solid #e2e2dd; }
.student-detail-media__top > span { color: var(--text-3); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.student-detail-media__top button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #deded8;
  border-radius: 50%;
  background: #fff;
  color: #252522;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.student-detail-media__top button:hover { transform: scale(1.04); background: #f4f4f1; }
.student-detail-media__top button svg { width: 16px; height: 16px; }
.student-detail-media__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9e8e2;
}
.student-detail-media__frame > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.student-detail-media__placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 13px; background: linear-gradient(145deg,#deddd6,#f2f1ec); }
.student-detail-media__placeholder div { width: 74px; height: 74px; display:grid; place-items:center; border-radius:50%; background:#171715; color:#fff; font-size:20px; font-weight:760; }
.student-detail-media__placeholder span { color: var(--text-3); font-size: 11px; }
.student-detail-media__caption { min-height: 62px; padding: 0 22px; }
.student-detail-media__caption span:first-child { font-size: 12px; font-weight: 700; }
.student-detail-media__caption span:last-child { color: #a1a19b; font-size: 8.5px; font-weight: 750; letter-spacing: .1em; }

.student-detail-section { padding: 100px 0; }
.student-detail-section--soft { background: #f5f5f3; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.student-detail-section__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.student-detail-section__eyebrow { color: var(--text-3); font-size: 10px; font-weight: 750; letter-spacing: .11em; }
.student-detail-section h2 { max-width: 520px; margin-top: 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; }
.student-detail-section__intro { max-width: 470px; margin-top: 20px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.student-skill-panel { border-top: 1px solid var(--border); }
.student-skill-item {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 32px;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid var(--border);
}
.student-skill-item__icon { width: 40px; height: 40px; display:grid; place-items:center; border-radius:12px; background:#f3f3f0; color:#20201e; }
.student-skill-item__icon svg { width: 20px; height: 20px; }
.student-skill-item > div:nth-child(2) span { display:block; color:#aaa9a3; font-size:9px; font-weight:750; letter-spacing:.08em; }
.student-skill-item > div:nth-child(2) strong { display:block; margin-top:5px; font-size:15px; }
.student-skill-item__check { width: 24px; height: 24px; color:#5b5b56; }
.student-skill-empty { padding: 28px 0; color: var(--text-3); font-size: 12px; border-bottom: 1px solid var(--border); }

.student-detail-section__head { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.student-detail-score { text-align:right; }
.student-detail-score span { display:block; color:var(--text-3); font-size:10px; }
.student-detail-score strong { display:block; margin-top:5px; font-family:var(--font-display); font-size:44px; letter-spacing:-.04em; }
.student-detail-progressline { height: 5px; margin-top: 40px; overflow:hidden; border-radius:999px; background:#deded9; }
.student-detail-progressline span { display:block; height:100%; width:0; border-radius:inherit; background:#171715; transition:width .75s cubic-bezier(.22,.75,.25,1); }
.student-milestones { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.student-milestone {
  min-height: 240px;
  padding: 22px;
  border: 1px solid #deded9;
  border-radius: 18px;
  background: rgba(255,255,255,.56);
  color:#8b8b85;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.student-milestone.is-complete { background:#fff; color:#191917; border-color:#cdcdc7; }
.student-milestone.is-current { transform:translateY(-4px); box-shadow:0 15px 40px rgba(20,20,18,.06); }
.student-milestone__icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid currentColor; border-radius:13px; opacity:.72; }
.student-milestone__icon svg { width:20px; height:20px; }
.student-milestone > span { display:block; margin-top:40px; font-size:9px; font-weight:750; letter-spacing:.08em; opacity:.72; }
.student-milestone h3 { margin-top:9px; font-size:17px; }
.student-milestone p { margin-top:8px; color:inherit; font-size:11.5px; line-height:1.55; opacity:.76; }

.student-detail-navigation { padding: 58px 0 96px; }
.student-detail-navigation__inner { display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:center; }
.student-detail-navlink,
.student-detail-all { color: inherit; text-decoration:none; }
.student-detail-navlink { display:flex; align-items:center; gap:14px; min-width:0; }
.student-detail-navlink--next { justify-content:flex-end; text-align:right; }
.student-detail-navlink > svg { width:23px; height:23px; flex:0 0 auto; transition:transform .18s ease; }
.student-detail-navlink--prev:hover > svg { transform:translateX(-4px); }
.student-detail-navlink--next:hover > svg { transform:translateX(4px); }
.student-detail-navlink span { display:block; color:var(--text-3); font-size:9.5px; font-weight:650; }
.student-detail-navlink strong { display:block; overflow:hidden; max-width:260px; margin-top:4px; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.student-detail-all { display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid var(--border); border-radius:999px; color:var(--text-2); font-size:10.5px; font-weight:700; transition:background .18s ease; }
.student-detail-all:hover { background:#f5f5f2; }
.student-detail-all svg { width:15px; height:15px; }

.student-lightbox[hidden] { display:none !important; }
.student-lightbox {
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:36px;
  background:rgba(8,8,7,.94);
  backdrop-filter:blur(12px);
}
.student-lightbox__stage { max-width:min(1240px, 94vw); max-height:88vh; }
.student-lightbox__stage img { display:block; max-width:100%; max-height:88vh; border-radius:14px; box-shadow:0 35px 90px rgba(0,0,0,.45); }
.student-lightbox__close { position:absolute; top:24px; right:24px; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.student-lightbox__close svg { width:19px; height:19px; }
.student-lightbox-open { overflow:hidden; }

@media (max-width: 1120px) {
  .student-directory-row { grid-template-columns: 38px minmax(210px,1fr) 150px minmax(160px,.8fr) 140px 108px; gap:16px; }
  .student-directory-visual { width:140px; height:84px; }
  .student-detail-hero__grid { grid-template-columns: minmax(0,.9fr) minmax(400px,1.1fr); gap:46px; }
  .student-detail-quickstats { grid-template-columns:1fr; gap:8px; }
  .student-detail-quickstat { padding-top:10px; }
}
@media (max-width: 900px) {
  .student-directory-head { grid-template-columns:1fr; gap:20px; }
  .student-directory-row { grid-template-columns: 34px 1fr 116px 104px; }
  .student-directory-progress, .student-directory-skills { display:none; }
  .student-directory-visual { width:116px; height:74px; }
  .student-directory-open span { display:none; }
  .student-detail-hero__grid { grid-template-columns:1fr; }
  .student-detail-copy { order:1; }
  .student-detail-media { order:2; }
  .student-detail-back { margin-bottom:36px; }
  .student-detail-quickstats { grid-template-columns:repeat(3,1fr); }
  .student-detail-section__grid { grid-template-columns:1fr; gap:46px; }
  .student-milestones { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .student-directory-section { padding:66px 0 76px; }
  .student-directory-meta { align-items:flex-start; }
  .student-directory-hint { max-width:170px; text-align:right; line-height:1.45; }
  .student-directory-row { grid-template-columns: 1fr 92px 30px; min-height:118px; gap:12px; padding:16px 0; }
  .student-directory-index { display:none; }
  .student-directory-avatar { width:42px; height:42px; }
  .student-directory-visual { width:92px; height:68px; border-radius:10px; }
  .student-directory-open { justify-content:center; }
  .student-detail-hero { padding:44px 0 62px; }
  .student-detail-copy h1 { font-size:52px; }
  .student-detail-quickstats { grid-template-columns:1fr; margin-top:30px; }
  .student-detail-media { border-radius:20px; }
  .student-detail-section { padding:72px 0; }
  .student-detail-section h2 { font-size:40px; }
  .student-detail-section__head { align-items:flex-start; flex-direction:column; gap:22px; }
  .student-detail-score { text-align:left; }
  .student-milestones { grid-template-columns:1fr; }
  .student-milestone { min-height:190px; }
  .student-detail-navigation__inner { grid-template-columns:1fr 1fr; }
  .student-detail-all { grid-column:1 / -1; grid-row:2; justify-self:center; }
  .student-detail-navlink strong { max-width:130px; }
  .student-lightbox { padding:16px; }
  .student-lightbox__close { top:14px; right:14px; }
}

/* =========================================================
   HOME — dynamic blog slider between registration and stats
   ========================================================= */
.home-blog-slider {
  width: 100%;
  max-width: var(--container);
  margin: 64px auto 72px;
  padding: 0 24px;
}

.home-blog-slider .home-portfolio__card {
  width: clamp(300px, 31vw, 380px);
}

.home-blog-slider .home-portfolio__media {
  height: 220px;
}

@media (max-width: 760px) {
  .home-blog-slider {
    margin: 44px auto 52px;
    padding: 0 18px;
  }

  .home-blog-slider .home-portfolio__card {
    width: min(84vw, 350px);
  }

  .home-blog-slider .home-portfolio__media {
    height: 205px;
  }
}

/* =========================================================
   MULTI IMAGE / VIDEO GALLERIES
   ========================================================= */
.cef-media-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
.cef-media-gallery--single { grid-template-columns: minmax(0, 1fr); }
.cef-media-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #ecebea;
  min-height: 220px;
}
.cef-media-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 720px;
  object-fit: cover;
}
.cef-media-gallery--single figure,
.cef-media-gallery--single img { min-height: 320px; }
.cef-media-video {
  display: block;
  width: 100%;
  margin-top: 16px;
  border-radius: 18px;
  background: #0d0d0d;
  max-height: 760px;
}
.blog-cover .cef-media-gallery,
.project-detail-cover .cef-media-gallery,
.mc-detail-media .cef-media-gallery { width: 100%; }
.student-detail-media__frame .cef-media-gallery { padding: 0; }
.student-detail-media__frame .cef-media-gallery figure { min-height: 280px; border-radius: 0; }
.student-detail-media__frame .cef-media-gallery img { min-height: 280px; }
.team-card__image:is(video) { object-fit: cover; width: 100%; height: 100%; background: #111; }
@media (max-width: 720px) {
  .cef-media-gallery { grid-template-columns: 1fr; gap: 10px; }
  .cef-media-gallery figure,
  .cef-media-gallery img,
  .cef-media-gallery--single figure,
  .cef-media-gallery--single img { min-height: 220px; }
}
.team-card__media-slider {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.team-card__media-slider::-webkit-scrollbar { display: none; }
.team-card__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}
.team-card__slide .team-card__image { width: 100%; height: 100%; object-fit: cover; }