@import url('https://fonts.cdnfonts.com/css/garet');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');

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

html {
  scroll-behavior: smooth;
}

/* =========================================================
   GLOBAL FONT FINAL
========================================================= */

/* =========================================================
   FONT SYSTEM
========================================================= */

/* TIMEWISE */
.tw-section,
.tw-section *,
.tw-hero,
.tw-hero * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* POLYTRIP */
.pt-section,
.pt-section *,
.pt-hero,
.pt-hero * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* SKILLSWAP */
.ss-section,
.ss-section *,
.ss-hero,
.ss-hero * {
  font-family: 'Inter', sans-serif !important;
}

body {
  font-family: 'Garet', 'Inter', 'Noto Sans KR', sans-serif !important;
  color: #111111;
  background: #ffffff;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   HEADER
========================= */

.header {
  width: 100%;
  min-height: 72px;
  padding: 0 42px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  flex-shrink: 0;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  color: #777777;
  font-size: 15px;
  font-weight: 400;
  transition: 0.2s ease;
}

.nav a:hover,
.nav a.active {
  color: #111111;
}

/* =========================
   HOME HERO
========================= */

.home-page .hero {
  width: 100%;
  min-height: calc(100vh - 72px);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.95), transparent 40%),
    linear-gradient(135deg, #f3f5f2 0%, #d6dde2 38%, #243847 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-page .hero-inner {
  width: min(1400px, 90%);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 110px;
  align-items: center;
}

.home-page .hero-text {
  max-width: 650px;
}

.eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: #314c59;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.home-page .hero-text h1 {
  font-size: clamp(60px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -4px;
  margin-bottom: 30px;
  color: #111111;
}

.hero-description {
  max-width: 620px;
  font-size: 21px;
  line-height: 1.9;
  color: #25333a;
  margin-bottom: 46px;
}

.hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.btn {
  min-width: 150px;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  transition: 0.25s ease;
}

.primary-btn {
  background: #102631;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(16, 38, 49, 0.24);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #102631;
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
}

.btn:hover {
  transform: translateY(-3px);
}

.primary-btn:hover {
  background: #091b23;
}

.secondary-btn:hover {
  background: #ffffff;
}

.hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-box {
  width: 100%;
  max-width: 760px;
  min-height: 760px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.16);
  border: 2px dashed rgba(255, 255, 255, 0.78);
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 42px;
  display: block;
}

/* =========================
   HOME CASE STUDY
========================= */

.case-study {
  width: 100%;
  padding: 130px 6% 100px;
  background: linear-gradient(to bottom, #ffffff, #f7f8f7, #ffffff);
}

.section-title {
  text-align: center;
  margin-bottom: 90px;
}

.section-title p {
  font-size: 15px;
  font-weight: 700;
  color: #6d7480;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.section-title h2 {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -2.5px;
  margin-bottom: 22px;
}

.section-title span {
  width: 58px;
  height: 3px;
  background: #111111;
  display: inline-block;
}

.case-row {
  width: min(1380px, 100%);
  margin: 0 auto 110px;
  padding: 90px;
  border-radius: 38px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.case-row.reverse {
  grid-template-columns: 1fr 1fr;
}

.case-image {
  width: 100%;
  background: #d9d9d9;
  color: #777777;
  border: 1px solid #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone {
  max-width: 470px;
  height: 720px;
  border-radius: 42px;
  justify-self: center;
}

.laptop {
  height: 560px;
  border-radius: 30px;
}

.case-info {
  max-width: 680px;
}

.number {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 18px;
}

.case-info h3 {
  font-size: clamp(72px, 6vw, 110px);
  line-height: 0.92;
  letter-spacing: -5px;
  margin-bottom: 38px;
  font-weight: 800;
}

.case-info p {
  font-size: 22px;
  line-height: 2;
  color: #474747;
  margin-bottom: 48px;
}

.case-info a {
  font-size: 26px;
  font-weight: 700;
}

.case-info a:hover {
  opacity: 0.75;
}

.green,
.green-title,
.green-link {
  color: #7fb7a3 !important;
}

.blue,
.blue-title,
.blue-link {
  color: #5f89df !important;
}

.purple,
.purple-title,
.purple-link {
  color: #8c5ed7 !important;
}

/* =========================
   TIMEWISE HERO
========================= */

.tw-hero {
  width: 100%;
  min-height: 520px;
  background: linear-gradient(135deg, #eef4ef 0%, #dce9df 32%, #1f4a33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-hero-inner {
  width: min(1180px, 88%);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 110px;
  align-items: center;
}

.tw-gif-box {
  width: 300px;
  height: 440px;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-gif-box img,
.tw-gif-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

.tw-hero-text h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  color: #111111;
}

.tw-hero-text p {
  font-size: 17px;
  color: #1f1f1f;
  margin-bottom: 34px;
}

.tw-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.tw-btn {
  min-width: 190px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s ease;
}

.tw-btn.primary {
  background: #ffffff;
  color: #16362a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.tw-btn.secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
}

.tw-btn:hover {
  transform: translateY(-3px);
}

.tw-btn.primary:hover {
  background: #16362a;
  color: #ffffff;
}

.tw-btn.secondary:hover {
  background: #ffffff;
  color: #16362a;
}

/* =========================
   TIMEWISE SECTIONS
========================= */

.tw-section {
  width: 100%;
  padding: 110px 6%;
  background: #ffffff;
}

.tw-muted {
  background: #f6f8f6;
}

.tw-section-label {
  width: min(1180px, 100%);
  margin: 0 auto 28px;
  font-size: 15px;
  font-weight: 700;
  color: #6f927f;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.tw-section-label.inside {
  margin-bottom: 40px;
}

.tw-two-col {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.tw-card,
.tw-persona-card,
.tw-reveal-card {
  width: min(1280px, 100%);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 30px;
  padding: 64px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.tw-reveal-card {
  margin-top: 80px;
}

.tw-text h2,
.tw-card h2,
.tw-persona-card h2,
.tw-reveal-card h2 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin-bottom: 24px;
  font-weight: 600;
  color: #111111;
}

.tw-text h3,
.tw-process-item h3,
.tw-task-grid h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 18px;
  font-weight: 600;
}

.tw-text h4 {
  font-size: 17px;
  margin: 24px 0 10px;
  font-weight: 700;
}

.tw-text p,
.tw-card p,
.tw-persona-card p,
.tw-persona-card li,
.tw-task-grid p {
  font-size: 16px;
  line-height: 1.9;
  color: #222222;
}

.tw-text p + p {
  margin-top: 18px;
}

.tw-image {
  width: 100%;
  background: #d9d9d9;
  border-radius: 20px;
  overflow: hidden;
}

.tw-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tw-image img[src=""] {
  display: none;
}

.tw-problem-img {
  aspect-ratio: 4 / 3;
}

.tw-tall-img,
.tw-persona-img {
  aspect-ratio: 4 / 5;
}

.tw-caption {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #555555;
}

.tw-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  text-align: center;
}

.tw-process-item {
  padding: 20px 10px;
}

.tw-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #8bb9a8;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tw-icon::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 108px;
  border: 2px solid #8bb9a8;
  border-radius: 50%;
  opacity: 0.45;
}

.tw-icon i {
  font-size: 34px;
  position: relative;
  z-index: 2;
}

.tw-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 22px;
  margin-bottom: 28px;
}

.tw-step span {
  width: 42px;
  height: 42px;
  background: #6f927f;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.tw-reveal-card h2,
.tw-center {
  text-align: center;
}

.tw-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 50px;
}

.tw-insight {
  min-height: 280px;
  border-radius: 26px;
  padding: 42px 34px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.tw-small-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  background: #8bb9a8;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.tw-persona-card h2 {
  text-align: center;
  margin-bottom: 54px;
}

.tw-persona-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.tw-persona-grid ul {
  padding-left: 20px;
}

.tw-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
}

.tw-task-grid > div {
  padding: 0 42px;
  border-right: 1px solid #d7d7d7;
}

.tw-task-grid > div:first-child {
  padding-left: 0;
}

.tw-task-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.tw-prototype-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 28px;
  align-items: center;
  text-align: center;
  margin-top: 54px;
}

.tw-wireframe-img {
  aspect-ratio: 3 / 4;
  background: #f1f1f1;
  border: 1px solid #d0d0d0;
  margin-bottom: 18px;
}

.tw-prototype-row a,
.tw-center-link {
  text-decoration: underline;
  color: #16362a;
  font-weight: 600;
}

.tw-arrow {
  font-size: 32px;
  color: #6f927f;
}

.tw-solution-img {
  max-width: 1100px;
  aspect-ratio: 16 / 7;
  margin: 0 auto 44px;
}

.tw-center-text {
  max-width: 880px;
  margin: 0 auto 24px;
  text-align: center;
}

.tw-center-link {
  display: block;
  text-align: center;
}

/* =========================
   POLYTRIP PAGE
========================= */

.pt-hero {
  width: 100%;
  min-height: 520px;
  background: linear-gradient(135deg, #eef7ff 0%, #d8ebff 32%, #0d4f8b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-hero-inner {
  width: min(1180px, 88%);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 110px;
  align-items: center;
}

.pt-gif-box {
  width: 300px;
  height: 440px;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 1px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-gif-box img,
.pt-gif-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

.pt-hero-text h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  color: #102033;
}

.pt-hero-text p {
  font-size: 17px;
  color: #102033;
  margin-bottom: 34px;
}

.pt-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.pt-btn {
  min-width: 190px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s ease;
}

.pt-btn.primary {
  background: #ffffff;
  color: #0d4f8b;
  box-shadow: 0 12px 28px rgba(13, 79, 139, 0.18);
}

.pt-btn.secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.pt-btn:hover {
  transform: translateY(-3px);
}

.pt-btn.primary:hover {
  background: #0d4f8b;
  color: #ffffff;
}

.pt-btn.secondary:hover {
  background: #ffffff;
  color: #0d4f8b;
}

.pt-section {
  width: 100%;
  padding: 110px 6%;
  background: #ffffff;
}

.pt-muted {
  background: #f3f8ff;
}

.pt-section-label {
  width: min(1180px, 100%);
  margin: 0 auto 28px;
  font-size: 15px;
  font-weight: 700;
  color: #2f7fc1;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.pt-section-label.inside {
  margin-bottom: 40px;
}

.pt-two-col {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.pt-card,
.pt-persona-card,
.pt-reveal-card {
  width: min(1280px, 100%);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 30px;
  padding: 64px;
  box-shadow: 0 18px 45px rgba(13, 79, 139, 0.08);
}

.pt-reveal-card {
  margin-top: 80px;
}

.pt-text h2,
.pt-card h2,
.pt-persona-card h2,
.pt-reveal-card h2 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin-bottom: 24px;
  font-weight: 600;
  color: #102033;
}

.pt-text h3,
.pt-process-item h3,
.pt-task-grid h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 18px;
  font-weight: 600;
  color: #102033;
}

.pt-text h4 {
  font-size: 17px;
  margin: 24px 0 10px;
  font-weight: 700;
  color: #102033;
}

.pt-text p,
.pt-card p,
.pt-persona-card p,
.pt-persona-card li,
.pt-task-grid p {
  font-size: 16px;
  line-height: 1.9;
  color: #223247;
}

.pt-text p + p {
  margin-top: 18px;
}

.pt-image {
  width: 100%;
  background: #d9e8f7;
  border-radius: 20px;
  overflow: hidden;
}

.pt-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pt-image img[src=""] {
  display: none;
}

.pt-problem-img {
  aspect-ratio: 4 / 3;
}

.pt-tall-img,
.pt-persona-img {
  aspect-ratio: 4 / 5;
}

.pt-caption {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #526579;
}

.pt-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  text-align: center;
}

.pt-process-item {
  padding: 20px 10px;
}

.pt-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #4f9ee3;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pt-icon::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 108px;
  border: 2px solid #4f9ee3;
  border-radius: 50%;
  opacity: 0.45;
}

.pt-icon i {
  font-size: 34px;
  position: relative;
  z-index: 2;
}

.pt-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 22px;
  margin-bottom: 28px;
}

.pt-step span {
  width: 42px;
  height: 42px;
  background: #2f7fc1;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.pt-reveal-card h2,
.pt-center {
  text-align: center;
}

.pt-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 50px;
}

.pt-insight {
  min-height: 280px;
  border-radius: 26px;
  padding: 42px 34px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(13, 79, 139, 0.08);
  text-align: center;
}

.pt-small-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  background: #4f9ee3;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.pt-persona-card h2 {
  text-align: center;
  margin-bottom: 54px;
}

.pt-persona-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.pt-persona-grid ul {
  padding-left: 20px;
}

.pt-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
}

.pt-task-grid > div {
  padding: 0 42px;
  border-right: 1px solid #cddff0;
}

.pt-task-grid > div:first-child {
  padding-left: 0;
}

.pt-task-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.pt-prototype-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 28px;
  align-items: center;
  text-align: center;
  margin-top: 54px;
}

.pt-wireframe-img {
  aspect-ratio: 3 / 4;
  background: #f1f7ff;
  border: 1px solid #cddff0;
  margin-bottom: 18px;
}

.pt-prototype-row a,
.pt-center-link {
  text-decoration: underline;
  color: #0d4f8b;
  font-weight: 600;
}

.pt-arrow {
  font-size: 32px;
  color: #2f7fc1;
}

.pt-solution-img {
  max-width: 1100px;
  aspect-ratio: 16 / 7;
  margin: 0 auto 44px;
}

.pt-center-text {
  max-width: 880px;
  margin: 0 auto 24px;
  text-align: center;
}

.pt-center-link {
  display: block;
  text-align: center;
}

/* =========================
   SKILLSWAP PAGE
========================= */

.ss-hero {
  width: 100%;
  min-height: 520px;
  background: linear-gradient(135deg, #f4edff 0%, #d8c6ff 32%, #3b147d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-hero-inner {
  width: min(1180px, 88%);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 110px;
  align-items: center;
}

.ss-gif-box {
  width: 300px;
  height: 440px;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 1px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-gif-box img,
.ss-gif-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

.ss-hero-text h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  color: #1d1233;
}

.ss-hero-text p {
  font-size: 17px;
  color: #1d1233;
  margin-bottom: 34px;
}

.ss-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.ss-btn {
  min-width: 190px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s ease;
}

.ss-btn.primary {
  background: #ffffff;
  color: #5c2ec5;
  box-shadow: 0 12px 28px rgba(92, 46, 197, 0.18);
}

.ss-btn.secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.ss-btn:hover {
  transform: translateY(-3px);
}

.ss-btn.primary:hover {
  background: #5c2ec5;
  color: #ffffff;
}

.ss-btn.secondary:hover {
  background: #ffffff;
  color: #5c2ec5;
}

.ss-section {
  width: 100%;
  padding: 110px 6%;
  background: #ffffff;
}

.ss-muted {
  background: #f8f4ff;
}

.ss-section-label {
  width: min(1180px, 100%);
  margin: 0 auto 28px;
  font-size: 15px;
  font-weight: 700;
  color: #7a46de;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.ss-section-label.inside {
  margin-bottom: 40px;
}

.ss-two-col {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.ss-card,
.ss-persona-card,
.ss-reveal-card {
  width: min(1280px, 100%);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 30px;
  padding: 64px;
  box-shadow: 0 18px 45px rgba(92, 46, 197, 0.08);
}

.ss-reveal-card {
  margin-top: 80px;
}

.ss-text h2,
.ss-card h2,
.ss-persona-card h2,
.ss-reveal-card h2 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin-bottom: 24px;
  font-weight: 600;
  color: #1d1233;
}

.ss-text h3,
.ss-process-item h3,
.ss-task-grid h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 18px;
  font-weight: 600;
  color: #1d1233;
}

.ss-text h4 {
  font-size: 17px;
  margin: 24px 0 10px;
  font-weight: 700;
  color: #1d1233;
}

.ss-text p,
.ss-card p,
.ss-persona-card p,
.ss-persona-card li,
.ss-task-grid p {
  font-size: 16px;
  line-height: 1.9;
  color: #2d2440;
}

.ss-text p + p {
  margin-top: 18px;
}

.ss-image {
  width: 100%;
  background: #e7dcff;
  border-radius: 20px;
  overflow: hidden;
}

.ss-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-image img[src=""] {
  display: none;
}

.ss-problem-img {
  aspect-ratio: 4 / 3;
}

.ss-tall-img,
.ss-persona-img {
  aspect-ratio: 4 / 5;
}

.ss-caption {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #665a7d;
}

.ss-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  text-align: center;
}

.ss-process-item {
  padding: 20px 10px;
}

.ss-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #7a46de;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ss-icon::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 108px;
  border: 2px solid #7a46de;
  border-radius: 50%;
  opacity: 0.45;
}

.ss-icon i {
  font-size: 34px;
  position: relative;
  z-index: 2;
}

.ss-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 22px;
  margin-bottom: 28px;
}

.ss-step span {
  width: 42px;
  height: 42px;
  background: #6d39d4;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ss-reveal-card h2,
.ss-center {
  text-align: center;
}

.ss-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 50px;
}

.ss-insight {
  min-height: 280px;
  border-radius: 26px;
  padding: 42px 34px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(92, 46, 197, 0.08);
  text-align: center;
}

.ss-small-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  background: #7a46de;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.ss-persona-card h2 {
  text-align: center;
  margin-bottom: 54px;
}

.ss-persona-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.ss-persona-grid ul {
  padding-left: 20px;
}

.ss-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
}

.ss-task-grid > div {
  padding: 0 42px;
  border-right: 1px solid #dacaf8;
}

.ss-task-grid > div:first-child {
  padding-left: 0;
}

.ss-task-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.ss-prototype-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 28px;
  align-items: center;
  text-align: center;
  margin-top: 54px;
}

.ss-wireframe-img {
  aspect-ratio: 3 / 4;
  background: #f7f2ff;
  border: 1px solid #dacaf8;
  margin-bottom: 18px;
}

.ss-prototype-row a,
.ss-center-link {
  text-decoration: underline;
  color: #5c2ec5;
  font-weight: 600;
}

.ss-arrow {
  font-size: 32px;
  color: #7a46de;
}

.ss-solution-img {
  max-width: 1100px;
  aspect-ratio: 16 / 7;
  margin: 0 auto 44px;
}

.ss-center-text {
  max-width: 880px;
  margin: 0 auto 24px;
  text-align: center;
}

.ss-center-link {
  display: block;
  text-align: center;
}

/* =========================
   IMAGE GALLERY PAGE
========================= */

.image-gallery-page {
  width: 100%;
  background: #f7f7f5;
}

.gallery-hero {
  width: 100%;
  padding: 130px 6% 110px;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(135deg, #f4f1eb 0%, #ebe8ff 35%, #dbe7ff 100%);
}

.gallery-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #5b6170;
  margin-bottom: 22px;
}

.gallery-hero h1 {
  font-size: 82px;
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 28px;
  color: #111111;
}

.gallery-description {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.9;
  color: #555555;
}

.gallery-list {
  width: 100%;
  padding: 110px 6% 140px;
}

.gallery-item {
  width: min(1450px, 100%);
  margin: 0 auto 90px;
  padding: 72px;
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 90px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.gallery-item:last-child {
  margin-bottom: 0;
}

.gallery-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(111,146,127,0.08), transparent 70%);
  pointer-events: none;
}

.gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 18px 42px rgba(0,0,0,0.12);
}

.gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-gallery-img {
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(0,0,0,0.05);
}

.logo-gallery-img img {
  object-fit: contain;
  padding: 36px;
}

.gallery-info {
  max-width: 650px;
}

.gallery-number {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #6f927f;
  margin-bottom: 24px;
}

.blue-number {
  color: #567fd8;
}

.yellow-number {
  color: #d1aa17;
}

.gallery-info h2 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 16px;
  color: #1d1d1d;
}

.gallery-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #7d7d7d;
  margin-bottom: 42px;
}

.gallery-meta {
  font-size: 19px;
  line-height: 1.9;
  color: #8c8c8c;
  margin-bottom: 36px;
}

.gallery-info p {
  font-size: 19px;
  line-height: 2;
  color: #676767;
}

.ai-gallery-item {
  background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
}

.logo-gallery-card {
  background: linear-gradient(135deg, #ffffff 0%, #fffdf4 100%);
}

/* =========================
   PROJECT PAGE
========================= */

.project-page {
  width: 100%;
  background: #f7f7f5;
}

.project-hero {
  width: 100%;
  padding: 130px 6% 110px;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(135deg, #f4f1eb 0%, #ececff 35%, #dfe7ff 100%);
}

.project-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #666d80;
  margin-bottom: 22px;
}

.project-hero h1 {
  font-size: 82px;
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 28px;
  color: #111111;
}

.project-description {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.9;
  color: #555555;
}

.project-list {
  width: 100%;
  padding: 110px 6% 140px;
}

.project-item {
  width: min(1450px, 100%);
  margin: 0 auto 90px;
  padding: 72px;
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 90px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.project-item:last-child {
  margin-bottom: 0;
}

.project-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(86,127,216,0.08), transparent 70%);
  pointer-events: none;
}

.project-img {
  width: 100%;
  aspect-ratio: 4 / 2.45;
  border-radius: 28px;
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 18px 42px rgba(0,0,0,0.12);
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-info {
  max-width: 650px;
}

.project-number {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #6f927f;
  margin-bottom: 24px;
}

.blue-project-number {
  color: #567fd8;
}

.purple-project-number {
  color: #875dd7;
}

.project-info h2 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 16px;
  color: #1d1d1d;
}

.project-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #7d7d7d;
  margin-bottom: 42px;
}

.project-meta {
  font-size: 19px;
  line-height: 1.9;
  color: #8c8c8c;
  margin-bottom: 34px;
}

.project-info p {
  font-size: 19px;
  line-height: 2;
  color: #676767;
}

.project-link-btn {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  background: #6f927f;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 42px;
  transition: 0.25s ease;
  box-shadow: 0 10px 24px rgba(111,146,127,0.22);
}

.project-link-btn:hover {
  transform: translateY(-4px);
  background: #5e7d6c;
}

.project-link-btn i {
  font-size: 13px;
}

.blue-btn {
  background: #567fd8;
  box-shadow: 0 10px 24px rgba(86,127,216,0.22);
}

.blue-btn:hover {
  background: #456fcb;
}

.purple-btn {
  background: #875dd7;
  box-shadow: 0 10px 24px rgba(135,93,215,0.22);
}

.purple-btn:hover {
  background: #7447cc;
}

.web-project {
  background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
}

.prototype-project {
  background: linear-gradient(135deg, #ffffff 0%, #faf4ff 100%);
}

/* =========================
   ABOUT PAGE
========================= */

.about-page {
  width: 100%;
  background: #f7f8f7;
}

.about-hero {
  width: 100%;
  padding: 120px 6% 100px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(135deg, #eef4ef 0%, #e7e3ff 45%, #dbe7ff 100%);
}

.about-hero-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 90px;
  align-items: center;
}

.about-eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: #6f927f;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  margin-bottom: 20px;
}

.about-text h1 {
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -3px;
  margin-bottom: 30px;
  color: #111111;
}

.about-intro {
  font-size: 25px;
  line-height: 1.55;
  font-weight: 700;
  color: #333333;
  margin-bottom: 28px;
}

.about-text p {
  font-size: 19px;
  line-height: 1.95;
  color: #555555;
  max-width: 720px;
}

.about-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.about-btn {
  min-width: 160px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  transition: 0.25s ease;
}

.about-btn.primary {
  background: #17302d;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(23, 48, 45, 0.22);
}

.about-btn.secondary {
  background: rgba(255,255,255,0.35);
  color: #17302d;
  border: 1px solid rgba(255,255,255,0.9);
}

.about-btn:hover {
  transform: translateY(-3px);
}

.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 36px;
  background: #d9d9d9;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777777;
  font-size: 18px;
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-info-section {
  width: min(1280px, 88%);
  margin: 0 auto;
  padding: 110px 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.about-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 54px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
}

.about-card h2 {
  font-size: 38px;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}

.about-card p {
  font-size: 18px;
  line-height: 1.9;
  color: #666666;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.skill-tags span {
  padding: 12px 18px;
  border-radius: 999px;
  background: #f1f4f2;
  color: #17302d;
  font-size: 15px;
  font-weight: 700;
}

.experience-section {
  width: min(1280px, 88%);
  margin: 0 auto;
  padding: 90px 0 130px;
}

.experience-header {
  text-align: center;
  margin-bottom: 70px;
}

.experience-header h2 {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -2.5px;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.experience-card {
  min-height: 300px;
  border-radius: 30px;
  padding: 42px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

.experience-card:hover {
  transform: translateY(-6px);
}

.experience-card span {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 34px;
}

.experience-card h3 {
  font-size: 34px;
  letter-spacing: -1.2px;
  margin-bottom: 22px;
}

.experience-card p {
  font-size: 17px;
  line-height: 1.8;
  color: #666666;
}

.timewise-exp span,
.timewise-exp h3 {
  color: #7fb7a3;
}

.polytrip-exp span,
.polytrip-exp h3 {
  color: #5f89df;
}

.skillswap-exp span,
.skillswap-exp h3 {
  color: #8c5ed7;
}

/* =========================
   CONTACT PAGE
========================= */

.contact-page {
  width: 100%;
  background: #f7f8f7;
}

.contact-hero {
  width: 100%;
  padding: 130px 6% 110px;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(135deg, #f4f1eb 0%, #e7e3ff 45%, #dbe7ff 100%);
}

.contact-eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: #6f927f;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  margin-bottom: 22px;
}

.contact-hero h1 {
  max-width: 920px;
  margin: 0 auto 28px;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -3px;
  color: #111111;
}

.contact-hero p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.9;
  color: #555555;
}

.contact-content {
  width: min(1280px, 88%);
  margin: 0 auto;
  padding: 110px 0 130px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 38px;
}

.contact-card {
  background: #ffffff;
  border-radius: 34px;
  padding: 58px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
}

.contact-card h2 {
  font-size: 42px;
  letter-spacing: -1.5px;
  margin-bottom: 38px;
}

.contact-info-list {
  display: grid;
  gap: 22px;
}

.contact-info-item {
  padding: 26px;
  border-radius: 24px;
  background: #f7f8f7;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: center;
  transition: 0.25s ease;
}

.contact-info-item:hover {
  transform: translateY(-4px);
  background: #eef4ef;
}

.contact-info-item span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #17302d;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.contact-info-item h4 {
  font-size: 18px;
  margin-bottom: 6px;
}

.contact-info-item p {
  font-size: 17px;
  color: #666666;
}

.contact-social-card p {
  font-size: 18px;
  line-height: 1.9;
  color: #666666;
  margin-bottom: 38px;
}

.contact-socials {
  display: grid;
  gap: 18px;
}

.contact-socials a {
  height: 58px;
  padding: 0 24px;
  border-radius: 999px;
  background: #17302d;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: 0.25s ease;
}

.contact-socials a:hover {
  transform: translateY(-3px);
  background: #0f2421;
}

.contact-socials i {
  font-size: 20px;
}

/* =========================
   FOOTER
========================= */

.footer {
  min-height: 280px;
  padding: 70px 6%;
  background:
    radial-gradient(circle at right top, rgba(255,255,255,0.08), transparent 35%),
    linear-gradient(135deg, #102631 0%, #1c3340 48%, #243847 100%);
  color: #ffffff;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 0.7fr;
  align-items: center;
  gap: 60px;
}

.footer-left h4 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 26px;
}

.footer-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  transition: 0.25s ease;
}

.footer-btn:hover {
  background: #ffffff;
  color: #102631;
}

.footer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.footer-info h5 {
  font-size: 17px;
  margin-bottom: 14px;
}

.footer-info p {
  font-size: 17px;
  color: #e5e5e5;
}

.socials {
  display: flex;
  justify-content: flex-end;
  gap: 34px;
}

.socials a {
  color: #ffffff;
  font-size: 34px;
  transition: 0.25s ease;
}

.socials a:hover {
  transform: translateY(-3px);
  opacity: 0.75;
}

.copyright {
  height: 78px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {
  .header {
    height: auto;
    padding: 24px;
    flex-direction: column;
    gap: 22px;
  }

  .nav {
    justify-content: center;
    gap: 20px;
  }

  .home-page .hero {
    min-height: auto;
    padding: 90px 0;
  }

  .home-page .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 70px;
  }

  .home-page .hero-text {
    margin: 0 auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image-box {
    max-width: 640px;
    min-height: 640px;
  }

  .case-study {
    padding: 90px 6% 60px;
  }

  .section-title h2 {
    font-size: 44px;
  }

  .case-row,
  .case-row.reverse {
    grid-template-columns: 1fr;
    padding: 50px 34px;
    gap: 50px;
  }

  .phone {
    max-width: 430px;
    width: 100%;
    height: 620px;
    margin: 0 auto;
  }

  .laptop {
    height: 430px;
  }

  .case-info h3 {
    font-size: 68px;
  }

  .case-info p {
    font-size: 18px;
  }

  .case-info a {
    font-size: 21px;
  }

  .tw-hero,
  .pt-hero,
  .ss-hero {
    padding: 70px 0;
  }

  .tw-hero-inner,
  .tw-two-col,
  .tw-process-grid,
  .tw-insight-grid,
  .tw-persona-grid,
  .tw-task-grid,
  .tw-prototype-row,
  .pt-hero-inner,
  .pt-two-col,
  .pt-process-grid,
  .pt-insight-grid,
  .pt-persona-grid,
  .pt-task-grid,
  .pt-prototype-row,
  .ss-hero-inner,
  .ss-two-col,
  .ss-process-grid,
  .ss-insight-grid,
  .ss-persona-grid,
  .ss-task-grid,
  .ss-prototype-row {
    grid-template-columns: 1fr;
  }

  .tw-hero-inner,
  .pt-hero-inner,
  .ss-hero-inner {
    text-align: center;
    gap: 50px;
  }

  .tw-gif-box,
  .pt-gif-box,
  .ss-gif-box {
    margin: 0 auto;
  }

  .tw-buttons,
  .pt-buttons,
  .ss-buttons {
    justify-content: center;
  }

  .tw-card,
  .tw-persona-card,
  .tw-reveal-card,
  .pt-card,
  .pt-persona-card,
  .pt-reveal-card,
  .ss-card,
  .ss-persona-card,
  .ss-reveal-card {
    padding: 38px 26px;
    border-radius: 24px;
  }

  .tw-task-grid > div,
  .pt-task-grid > div,
  .ss-task-grid > div {
    border-right: none;
    border-bottom: 1px solid #d7d7d7;
    padding: 0 0 32px;
  }

  .tw-task-grid > div:last-child,
  .pt-task-grid > div:last-child,
  .ss-task-grid > div:last-child {
    border-bottom: none;
  }

  .tw-arrow,
  .pt-arrow,
  .ss-arrow {
    display: none;
  }

  .gallery-hero,
  .project-hero,
  .contact-hero {
    padding: 90px 7% 70px;
  }

  .gallery-hero h1,
  .project-hero h1 {
    font-size: 52px;
  }

  .gallery-description,
  .project-description {
    font-size: 17px;
  }

  .gallery-list,
  .project-list {
    padding: 70px 7% 90px;
  }

  .gallery-item,
  .project-item {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 34px;
    margin-bottom: 56px;
  }

  .gallery-info h2,
  .project-info h2 {
    font-size: 38px;
  }

  .gallery-info h4,
  .project-info h4 {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .gallery-info p,
  .gallery-meta,
  .project-info p,
  .project-meta {
    font-size: 16px;
  }

  .project-link-btn {
    width: 100%;
    justify-content: center;
  }

  .about-hero {
    padding: 90px 7% 70px;
  }

  .about-hero-inner,
  .about-info-section,
  .experience-grid,
  .contact-content {
    grid-template-columns: 1fr;
  }

  .about-text h1 {
    font-size: 48px;
  }

  .about-intro {
    font-size: 20px;
  }

  .about-text p {
    font-size: 16px;
  }

  .about-info-section {
    padding: 70px 0 30px;
  }

  .about-card {
    padding: 34px;
  }

  .experience-header h2 {
    font-size: 44px;
  }

  .contact-hero h1 {
    font-size: 46px;
  }

  .contact-hero p {
    font-size: 17px;
  }

  .contact-content {
    padding: 70px 0 90px;
  }

  .contact-card {
    padding: 34px;
  }

  .contact-card h2 {
    font-size: 34px;
  }

  .footer {
    grid-template-columns: 1fr;
    padding: 54px 34px;
  }

  .footer-info {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .socials {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 24px;
    align-items: center;
  }

  .nav {
    gap: 16px;
  }

  .nav a {
    font-size: 14px;
  }

  .home-page .hero {
    padding: 60px 0;
  }

  .home-page .hero-inner {
    width: 92%;
    gap: 50px;
  }

  .home-page .hero-text h1 {
    font-size: 54px;
    letter-spacing: -2px;
  }

  .hero-description {
    font-size: 17px;
    line-height: 1.8;
  }

  .btn {
    width: 100%;
  }

  .hero-image-box {
    min-height: 400px;
    border-radius: 28px;
  }

  .hero-image-box img {
    border-radius: 26px;
  }

  .case-study {
    padding: 80px 5% 50px;
  }

  .section-title h2 {
    font-size: 48px;
  }

  .case-row {
    padding: 34px 24px;
    margin-bottom: 60px;
    border-radius: 26px;
  }

  .phone,
  .laptop {
    height: 340px;
    border-radius: 22px;
  }

  .case-info h3 {
    font-size: 52px;
    letter-spacing: -2px;
  }

  .case-info p {
    font-size: 17px;
    line-height: 1.8;
  }

  .case-info a {
    font-size: 20px;
  }

  .tw-section,
  .pt-section,
  .ss-section {
    padding: 80px 6%;
  }

  .tw-hero-text h1,
  .pt-hero-text h1,
  .ss-hero-text h1 {
    font-size: 38px;
  }

  .tw-gif-box,
  .pt-gif-box,
  .ss-gif-box {
    width: 260px;
    height: 380px;
  }

  .gallery-hero h1,
  .project-hero h1 {
    font-size: 46px;
    letter-spacing: -2px;
  }

  .gallery-item,
  .project-item {
    padding: 26px;
    border-radius: 26px;
  }

  .about-text h1,
  .contact-hero h1 {
    font-size: 42px;
    letter-spacing: -2px;
  }

  .about-photo {
    border-radius: 28px;
  }

  .contact-info-item {
    grid-template-columns: 1fr;
  }

  .footer-left h4 {
    font-size: 34px;
  }

  .socials a {
    font-size: 28px;
  }
}

.about-hero {
  width: 100%;
  padding: 120px 6% 100px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.95), transparent 40%),
    linear-gradient(135deg, #f3f5f2 0%, #d6dde2 38%, #243847 100%) !important;
}

.about-eyebrow {
  color: #314c59 !important;
}

.about-btn.primary {
  background: #102631 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(16, 38, 49, 0.24) !important;
}

.about-btn.secondary {
  background: rgba(255,255,255,0.18) !important;
  color: #102631 !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px);
}

.about-btn.primary:hover {
  background: #091b23 !important;
}

.about-btn.secondary:hover {
  background: #ffffff !important;
}
/* =========================================================
   FINAL APPLIED CASE STUDY FIXES
   Timewise / PolyTrip / SkillSwap
   Put after base CSS. This file already includes base CSS above.
========================================================= */

/* HERO GIF: wide horizontal video/gif area */
.tw-hero,
.pt-hero,
.ss-hero {
  min-height: 720px !important;
  padding: 80px 6% !important;
}

.tw-hero-inner,
.pt-hero-inner,
.ss-hero-inner {
  width: min(1500px, 100%) !important;
  display: grid !important;
  grid-template-columns: 1.35fr 0.85fr !important;
  gap: 90px !important;
  align-items: center !important;
}

.tw-gif-box,
.pt-gif-box,
.ss-gif-box {
  width: 100% !important;
  max-width: 940px !important;
  height: 500px !important;
  border-radius: 36px !important;
  background: rgba(255,255,255,0.16) !important;
  border: 2px dashed rgba(255,255,255,0.85) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.16) !important;
}

.tw-gif-box img,
.tw-gif-box video,
.pt-gif-box img,
.pt-gif-box video,
.ss-gif-box img,
.ss-gif-box video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* HMW QUESTION SECTION */
.hmw-section {
  width: 100%;
  padding: 120px 6%;
  background: #ffffff;
}

.hmw-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  text-align: center;
}

.hmw-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0.75;
}

.hmw-title {
  max-width: 1050px;
  margin: 0 auto;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.22;
  letter-spacing: -1.8px;
  font-weight: 700;
}

.tw-hmw .hmw-label,
.tw-hmw .hmw-title { color: #6f927f; }
.pt-hmw .hmw-label,
.pt-hmw .hmw-title { color: #2f7fc1; }
.ss-hmw .hmw-label,
.ss-hmw .hmw-title { color: #7a46de; }

/* TASK FLOW: taller phone-like previews, wider cards */
.tw-task-grid,
.pt-task-grid,
.ss-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin-top: 72px !important;
}

.tw-task-grid > div,
.pt-task-grid > div,
.ss-task-grid > div {
  padding: 0 !important;
  border-right: none !important;
}

.taskflow-card {
  width: 100%;
}

.taskflow-gif {
  width: 100% !important;
  height: 620px !important;
  border-radius: 34px !important;
  background: #d9d9d9 !important;
  overflow: hidden !important;
  margin-bottom: 34px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12) !important;
}

.taskflow-gif img,
.taskflow-gif video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.taskflow-card h3 {
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 24px !important;
}

.taskflow-card p {
  font-size: 20px !important;
  line-height: 1.9 !important;
}

/* MOODBOARD / SKETCH SECTION */
.moodboard-section {
  width: 100%;
  padding: 130px 6%;
  background: #ffffff;
}

.moodboard-container {
  width: min(1500px, 100%);
  margin: 0 auto;
}

.moodboard-title {
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
  margin-bottom: 70px;
}

.tw-mood .moodboard-title { color: #6f927f; }
.pt-mood .moodboard-title { color: #2f7fc1; }
.ss-mood .moodboard-title { color: #7a46de; }

.moodboard-image {
  width: 100%;
  min-height: 720px;
  border-radius: 36px;
  background: #d9d9d9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 26px;
}

.moodboard-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* DESIGN PROCESS: 3 horizontal rectangles + arrows */
.tw-prototype-row,
.pt-prototype-row,
.ss-prototype-row {
  display: grid !important;
  grid-template-columns: 1fr 70px 1fr 70px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
  margin-top: 70px !important;
  text-align: center !important;
}

.tw-arrow,
.pt-arrow,
.ss-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
}

.tw-wireframe-img,
.pt-wireframe-img,
.ss-wireframe-img {
  width: 100% !important;
  height: 520px !important;
  border-radius: 30px !important;
  background: #eeeeee !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
  aspect-ratio: auto !important;
}

.tw-wireframe-img img,
.pt-wireframe-img img,
.ss-wireframe-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tw-prototype-row p,
.pt-prototype-row p,
.ss-prototype-row p {
  font-size: 21px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.tw-prototype-row a,
.pt-prototype-row a,
.ss-prototype-row a {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* SOLUTION / FINAL SCREENS: lower height, wider */
.tw-solution-img,
.pt-solution-img,
.ss-solution-img {
  width: 100% !important;
  max-width: 1500px !important;
  height: 620px !important;
  border-radius: 34px !important;
  background: #d9d9d9 !important;
  overflow: hidden !important;
  margin: 0 auto 46px !important;
  aspect-ratio: auto !important;
}

.tw-solution-img img,
.pt-solution-img img,
.ss-solution-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Better section scale */
.tw-section,
.pt-section,
.ss-section {
  padding: 130px 6% !important;
}

.tw-card,
.pt-card,
.ss-card,
.tw-persona-card,
.pt-persona-card,
.ss-persona-card,
.tw-reveal-card,
.pt-reveal-card,
.ss-reveal-card {
  padding: 76px !important;
  border-radius: 38px !important;
}

.tw-card h2,
.pt-card h2,
.ss-card h2,
.tw-persona-card h2,
.pt-persona-card h2,
.ss-persona-card h2,
.tw-reveal-card h2,
.pt-reveal-card h2,
.ss-reveal-card h2 {
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -2px !important;
  margin-bottom: 56px !important;
}

.tw-text p,
.pt-text p,
.ss-text p,
.tw-card p,
.pt-card p,
.ss-card p,
.tw-persona-card p,
.pt-persona-card p,
.ss-persona-card p,
.tw-persona-card li,
.pt-persona-card li,
.ss-persona-card li {
  font-size: 19px !important;
  line-height: 1.9 !important;
}

/* TABLET RESPONSIVE */
@media (max-width: 1200px) {
  .tw-hero,
  .pt-hero,
  .ss-hero {
    min-height: auto !important;
    padding: 90px 6% !important;
  }

  .tw-hero-inner,
  .pt-hero-inner,
  .ss-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
    text-align: center !important;
  }

  .tw-gif-box,
  .pt-gif-box,
  .ss-gif-box {
    max-width: 100% !important;
    height: 460px !important;
    margin: 0 auto !important;
  }

  .tw-buttons,
  .pt-buttons,
  .ss-buttons {
    justify-content: center !important;
  }

  .tw-task-grid,
  .pt-task-grid,
  .ss-task-grid {
    grid-template-columns: 1fr !important;
    gap: 70px !important;
  }

  .taskflow-gif {
    height: 620px !important;
  }

  .tw-prototype-row,
  .pt-prototype-row,
  .ss-prototype-row {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
  }

  .tw-arrow,
  .pt-arrow,
  .ss-arrow {
    display: none !important;
  }

  .tw-wireframe-img,
  .pt-wireframe-img,
  .ss-wireframe-img {
    height: 520px !important;
  }

  .moodboard-image {
    min-height: 580px !important;
  }

  .tw-solution-img,
  .pt-solution-img,
  .ss-solution-img {
    height: 520px !important;
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .tw-section,
  .pt-section,
  .ss-section,
  .hmw-section,
  .moodboard-section {
    padding: 80px 5% !important;
  }

  .tw-card,
  .pt-card,
  .ss-card,
  .tw-persona-card,
  .pt-persona-card,
  .ss-persona-card,
  .tw-reveal-card,
  .pt-reveal-card,
  .ss-reveal-card {
    padding: 34px 24px !important;
    border-radius: 26px !important;
  }

  .tw-gif-box,
  .pt-gif-box,
  .ss-gif-box {
    height: 300px !important;
    border-radius: 24px !important;
  }

  .hmw-title {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }

  .taskflow-gif {
    height: 500px !important;
    border-radius: 26px !important;
  }

  .taskflow-card h3 {
    font-size: 28px !important;
  }

  .taskflow-card p {
    font-size: 17px !important;
  }

  .moodboard-title {
    font-size: 38px !important;
  }

  .moodboard-image {
    min-height: 380px !important;
    border-radius: 26px !important;
  }

  .tw-wireframe-img,
  .pt-wireframe-img,
  .ss-wireframe-img {
    height: 360px !important;
    border-radius: 24px !important;
  }

  .tw-solution-img,
  .pt-solution-img,
  .ss-solution-img {
    height: 330px !important;
    border-radius: 24px !important;
  }

  .tw-card h2,
  .pt-card h2,
  .ss-card h2,
  .tw-persona-card h2,
  .pt-persona-card h2,
  .ss-persona-card h2,
  .tw-reveal-card h2,
  .pt-reveal-card h2,
  .ss-reveal-card h2 {
    font-size: 36px !important;
    margin-bottom: 36px !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 430px) {
  .taskflow-gif {
    height: 430px !important;
  }

  .tw-gif-box,
  .pt-gif-box,
  .ss-gif-box {
    height: 260px !important;
  }

  .tw-wireframe-img,
  .pt-wireframe-img,
  .ss-wireframe-img {
    height: 300px !important;
  }

  .tw-solution-img,
  .pt-solution-img,
  .ss-solution-img {
    height: 280px !important;
  }
}

/* =========================================================
   HOMEPAGE IMAGE FINAL FIX
   ADD THIS TO THE VERY BOTTOM OF style.css
========================================================= */

/* =========================
   HERO IMAGE
========================= */

.hero-image-box {
  width: 100%;
  max-width: 760px;
  min-height: 760px;

  border-radius: 42px;
  overflow: hidden;

  background: rgba(255,255,255,0.14);

  box-shadow: 0 40px 90px rgba(0,0,0,0.16);
}

.hero-image-box img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  display: block;
}

/* =========================
   CASE STUDY IMAGES
========================= */

.case-image {
  overflow: hidden;
  background: #f3f3f3;
}

.case-image.phone {
  max-width: 500px;
  height: 760px;

  border-radius: 42px;

  justify-self: center;
}

.case-image.laptop {
  width: 100%;
  height: 560px;

  border-radius: 34px;
}

.case-image img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Timewise / PolyTrip */

.case-image.phone img {
  object-fit: contain;
  padding: 26px;
  background: #f4f4f4;
}

/* SkillSwap */

.case-image.laptop img {
  object-fit: cover;
}

/* =========================
   TABLET RESPONSIVE
========================= */

@media (max-width: 1200px) {

  .hero-image-box {
    max-width: 620px;
    min-height: 620px;
    margin: 0 auto;
  }

  .case-image.phone {
    max-width: 430px;
    height: 640px;
  }

  .case-image.laptop {
    height: 460px;
  }
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px) {

  .hero-image-box {
    min-height: 380px;
    border-radius: 28px;
  }

  .case-image.phone {
    width: 100%;
    max-width: 320px;
    height: 500px;

    border-radius: 28px;
  }

  .case-image.laptop {
    height: 280px;

    border-radius: 24px;
  }

  .case-image.phone img {
    padding: 14px;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 430px) {

  .hero-image-box {
    min-height: 320px;
  }

  .case-image.phone {
    height: 430px;
  }

  .case-image.laptop {
    height: 240px;
  }
}

/* =========================
   ABOUT PAGE PHOTO
========================= */

.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;

  border-radius: 36px;
  overflow: hidden;

  background: #d9d9d9;

  box-shadow: 0 28px 70px rgba(0,0,0,0.14);
}

.about-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  display: block;
}

/* =========================
   TABLET
========================= */

@media (max-width: 1200px) {

  .about-photo {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .about-photo {
    border-radius: 28px;
  }
}

.tw-image,
.tw-gif-box,
.tw-problem-img,
.tw-tall-img,
.tw-persona-img,
.moodboard-image,
.taskflow-gif,
.tw-wireframe-img,
.tw-solution-img {
  overflow: hidden;
}

.tw-image img,
.tw-gif-box img,
.tw-problem-img img,
.tw-tall-img img,
.tw-persona-img img,
.moodboard-image img,
.taskflow-gif img,
.tw-wireframe-img img,
.tw-solution-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tw-gif-box {
  width: 100% !important;
  max-width: 900px !important;
  height: 500px !important;
  border-radius: 34px !important;
}

.tw-gif-box img {
  object-fit: contain;
  background: #f4f4f4;
  padding: 24px;
}

.tw-problem-img {
  min-height: 420px;
}

.tw-problem-img img {
  object-fit: cover;
}

.tw-tall-img {
  min-height: 620px;
}

.tw-persona-img {
  min-height: 440px;
}

.tw-persona-img img {
  object-fit: cover;
  object-position: center top;
}

.moodboard-section {
  width: 100%;
  padding: 120px 6%;
  background: #ffffff;
}

.moodboard-container {
  width: min(1500px, 100%);
  margin: 0 auto;
}

.moodboard-title {
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
  margin-bottom: 70px;
  color: #6f927f;
}

.moodboard-image {
  width: 100%;
  min-height: 720px;
  border-radius: 36px;
  background: #d9d9d9;
}

.moodboard-image img {
  object-fit: cover;
}

.tw-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin-top: 72px !important;
}

.tw-task-grid > div {
  padding: 0 !important;
  border-right: none !important;
}

.taskflow-card {
  width: 100%;
}

.taskflow-gif {
  width: 100%;
  height: 620px;
  border-radius: 34px;
  background: #d9d9d9;
  margin-bottom: 34px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}

.taskflow-gif img {
  object-fit: cover;
}

.taskflow-card h3 {
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 24px !important;
}

.taskflow-card p {
  font-size: 20px !important;
  line-height: 1.9 !important;
}

.tw-prototype-row {
  display: grid !important;
  grid-template-columns: 1fr 70px 1fr 70px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
  margin-top: 70px !important;
  text-align: center !important;
}

.tw-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
}

.tw-wireframe-img {
  width: 100% !important;
  height: 520px !important;
  border-radius: 30px !important;
  background: #eeeeee !important;
  margin-bottom: 28px !important;
}

.tw-wireframe-img img {
  object-fit: contain;
  background: #f4f4f4;
  padding: 16px;
}

.tw-solution-img {
  width: 100% !important;
  max-width: 1500px !important;
  height: 620px !important;
  border-radius: 34px !important;
  background: #d9d9d9 !important;
  margin: 0 auto 46px !important;
}

.tw-solution-img img {
  object-fit: contain;
  background: #f4f4f4;
  padding: 20px;
}

@media (max-width: 1200px) {
  .tw-gif-box {
    max-width: 100% !important;
    height: 460px !important;
  }

  .tw-task-grid {
    grid-template-columns: 1fr !important;
    gap: 70px !important;
  }

  .taskflow-gif {
    height: 620px;
  }

  .tw-prototype-row {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
  }

  .tw-arrow {
    display: none !important;
  }

  .tw-wireframe-img {
    height: 520px !important;
  }

  .moodboard-image {
    min-height: 580px;
  }

  .tw-solution-img {
    height: 520px !important;
  }
}

@media (max-width: 768px) {
  .tw-gif-box {
    height: 300px !important;
    border-radius: 24px !important;
  }

  .tw-problem-img {
    min-height: 280px;
  }

  .tw-tall-img {
    min-height: 380px;
  }

  .tw-persona-img {
    min-height: 360px;
  }

  .taskflow-gif {
    height: 500px;
    border-radius: 26px;
  }

  .moodboard-section {
    padding: 80px 5%;
  }

  .moodboard-title {
    font-size: 38px;
    margin-bottom: 44px;
  }

  .moodboard-image {
    min-height: 380px;
    border-radius: 26px;
  }

  .tw-wireframe-img {
    height: 360px !important;
    border-radius: 24px !important;
  }

  .tw-solution-img {
    height: 330px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 430px) {
  .taskflow-gif {
    height: 430px;
  }

  .tw-gif-box {
    height: 260px !important;
  }

  .tw-wireframe-img {
    height: 300px !important;
  }

  .tw-solution-img {
    height: 280px !important;
  }
}

/* =========================================================
   TIMEWISE FORCE FIX V2 — FINAL
   This must be the LAST code in style.css
========================================================= */

/* 1) Make every Timewise image show fully, not cropped */
.tw-image,
.tw-problem-img,
.tw-tall-img,
.tw-interview-img,
.tw-persona-img,
.moodboard-image,
.tw-wireframe-img,
.tw-solution-img {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f4f4 !important;
}

.tw-image img,
.tw-problem-img img,
.tw-tall-img img,
.tw-interview-img img,
.tw-persona-img img,
.moodboard-image img,
.tw-wireframe-img img,
.tw-solution-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #f4f4f4 !important;
}

/* 2) Hero GIF box stays empty and wide */
.tw-hero {
  min-height: 720px !important;
  padding: 90px 6% !important;
}

.tw-hero-inner {
  width: min(1500px, 100%) !important;
  display: grid !important;
  grid-template-columns: 1.35fr 0.85fr !important;
  gap: 90px !important;
  align-items: center !important;
}

.tw-gif-box {
  width: 100% !important;
  max-width: 940px !important;
  height: 500px !important;
  border-radius: 36px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px dashed rgba(255,255,255,0.85) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.16) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tw-gif-box span,
.taskflow-gif span {
  display: block !important;
  color: #666666 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* 3) Problem / Define / Interview images */
.tw-problem-img {
  min-height: 520px !important;
  border-radius: 28px !important;
}

.tw-tall-img {
  min-height: 680px !important;
  border-radius: 30px !important;
}

.tw-interview-img {
  min-height: 760px !important;
  border-radius: 30px !important;
}

.tw-interview-img img {
  object-position: center top !important;
}

.tw-persona-img {
  min-height: 560px !important;
  border-radius: 30px !important;
}

.tw-persona-img img {
  object-position: center top !important;
}

/* 4) Moodboard */
.moodboard-section {
  width: 100% !important;
  padding: 130px 6% !important;
  background: #ffffff !important;
}

.moodboard-container {
  width: min(1500px, 100%) !important;
  margin: 0 auto !important;
}

.moodboard-title {
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  text-align: center !important;
  margin-bottom: 70px !important;
  color: #6f927f !important;
}

.moodboard-image {
  width: 100% !important;
  min-height: 760px !important;
  border-radius: 36px !important;
}

/* 5) Task flows: three big empty boxes, side by side on desktop */
.tw-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin-top: 72px !important;
}

.tw-task-grid > div {
  padding: 0 !important;
  border-right: none !important;
  border-bottom: none !important;
}

.taskflow-card {
  width: 100% !important;
}

.taskflow-gif {
  width: 100% !important;
  height: 620px !important;
  border-radius: 34px !important;
  background: #d9d9d9 !important;
  margin-bottom: 34px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.taskflow-gif img,
.taskflow-gif video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f4f4f4 !important;
  display: block !important;
}

.taskflow-card h3 {
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 24px !important;
}

.taskflow-card p {
  font-size: 20px !important;
  line-height: 1.9 !important;
}

/* 6) Design process stays 3 horizontal blocks with arrows */
.tw-prototype-row {
  display: grid !important;
  grid-template-columns: 1fr 70px 1fr 70px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
  margin-top: 70px !important;
  text-align: center !important;
}

.tw-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
}

.tw-wireframe-img {
  width: 100% !important;
  height: 520px !important;
  border-radius: 30px !important;
  margin-bottom: 28px !important;
}

.tw-wireframe-img img {
  padding: 16px !important;
}

/* 7) Solution / prototype image: wider, shorter, not cropped */
.tw-solution-img {
  width: 100% !important;
  max-width: 1500px !important;
  height: 620px !important;
  border-radius: 34px !important;
  margin: 0 auto 46px !important;
}

.tw-solution-img img {
  padding: 20px !important;
}

/* 8) Tablet */
@media (max-width: 1200px) {
  .tw-hero {
    min-height: auto !important;
    padding: 90px 6% !important;
  }

  .tw-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
    text-align: center !important;
  }

  .tw-gif-box {
    max-width: 100% !important;
    height: 460px !important;
    margin: 0 auto !important;
  }

  .tw-buttons {
    justify-content: center !important;
  }

  .tw-task-grid {
    grid-template-columns: 1fr !important;
    gap: 70px !important;
  }

  .taskflow-gif {
    height: 620px !important;
  }

  .tw-prototype-row {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
  }

  .tw-arrow {
    display: none !important;
  }

  .tw-wireframe-img {
    height: 520px !important;
  }

  .moodboard-image {
    min-height: 580px !important;
  }

  .tw-solution-img {
    height: 520px !important;
  }

  .tw-interview-img {
    min-height: 620px !important;
  }
}

/* 9) Mobile */
@media (max-width: 768px) {
  .tw-section,
  .hmw-section,
  .moodboard-section {
    padding: 80px 5% !important;
  }

  .tw-gif-box {
    height: 300px !important;
    border-radius: 24px !important;
  }

  .tw-problem-img {
    min-height: 300px !important;
  }

  .tw-tall-img {
    min-height: 420px !important;
  }

  .tw-interview-img {
    min-height: 460px !important;
  }

  .tw-persona-img {
    min-height: 380px !important;
  }

  .taskflow-gif {
    height: 500px !important;
    border-radius: 26px !important;
  }

  .taskflow-card h3 {
    font-size: 28px !important;
  }

  .taskflow-card p {
    font-size: 17px !important;
  }

  .moodboard-title {
    font-size: 38px !important;
    margin-bottom: 44px !important;
  }

  .moodboard-image {
    min-height: 380px !important;
    border-radius: 26px !important;
  }

  .tw-wireframe-img {
    height: 360px !important;
    border-radius: 24px !important;
  }

  .tw-solution-img {
    height: 330px !important;
    border-radius: 24px !important;
  }
}

/* 10) Small mobile */
@media (max-width: 430px) {
  .taskflow-gif {
    height: 430px !important;
  }

  .tw-gif-box {
    height: 260px !important;
  }

  .tw-wireframe-img {
    height: 300px !important;
  }

  .tw-solution-img {
    height: 280px !important;
  }

  .tw-interview-img {
    min-height: 390px !important;
  }
}

.tw-problem-img,
.tw-tall-img,
.tw-persona-img,
.moodboard-image,
.tw-wireframe-img,
.tw-solution-img {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.tw-problem-img img,
.tw-tall-img img,
.tw-persona-img img,
.moodboard-image img,
.tw-wireframe-img img,
.tw-solution-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
}

.tw-problem-img {
  min-height: unset !important;
}

.tw-tall-img {
  min-height: unset !important;
}

.tw-persona-img {
  min-height: unset !important;
}

.moodboard-image {
  min-height: unset !important;
}

.tw-wireframe-img {
  height: auto !important;
}

.tw-solution-img {
  height: auto !important;
  max-width: 1600px !important;
}

/* DESIGN PROCESS IMAGE FIX */
.tw-wireframe-img {
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.tw-wireframe-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.tw-prototype-row > div {
  overflow: visible !important;
}

/* =========================================================
   POLYTRIP FINAL IMAGE FIX
   ADD TO VERY BOTTOM OF style.css
========================================================= */

.pt-problem-img,
.pt-tall-img,
.pt-persona-img,
.pt-interview-img,
.pt-wireframe-img,
.pt-solution-img,
.pt-mood .moodboard-image {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.pt-problem-img img,
.pt-tall-img img,
.pt-persona-img img,
.pt-interview-img img,
.pt-wireframe-img img,
.pt-solution-img img,
.pt-mood .moodboard-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 22px !important;
}

.pt-problem-img,
.pt-tall-img,
.pt-persona-img,
.pt-interview-img,
.pt-wireframe-img,
.pt-solution-img,
.pt-mood .moodboard-image {
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: auto !important;
}

.pt-gif-box,
.pt-task-grid .taskflow-gif {
  background: #d9d9d9 !important;
  overflow: hidden !important;
}

.pt-gif-box {
  width: 100% !important;
  max-width: 940px !important;
  height: 500px !important;
  border-radius: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pt-gif-box span,
.pt-task-grid .taskflow-gif span {
  color: #666666 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pt-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin-top: 72px !important;
}

.pt-task-grid > div {
  padding: 0 !important;
  border-right: none !important;
}

.pt-task-grid .taskflow-gif {
  width: 100% !important;
  height: 620px !important;
  border-radius: 34px !important;
  margin-bottom: 34px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pt-prototype-row {
  display: grid !important;
  grid-template-columns: 1fr 70px 1fr 70px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
  margin-top: 70px !important;
  text-align: center !important;
}

.pt-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
}

.pt-mood .moodboard-title {
  color: #2f7fc1 !important;
}

.pt-mood .moodboard-image {
  width: min(1500px, 100%) !important;
  margin: 0 auto !important;
}

.pt-solution-img {
  width: min(1500px, 100%) !important;
  margin: 0 auto 46px !important;
}

@media (max-width: 1200px) {
  .pt-gif-box {
    max-width: 100% !important;
    height: 460px !important;
  }

  .pt-task-grid {
    grid-template-columns: 1fr !important;
    gap: 70px !important;
  }

  .pt-task-grid .taskflow-gif {
    height: 620px !important;
  }

  .pt-prototype-row {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
  }

  .pt-arrow {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .pt-gif-box {
    height: 300px !important;
    border-radius: 24px !important;
  }

  .pt-task-grid .taskflow-gif {
    height: 500px !important;
    border-radius: 26px !important;
  }

  .pt-problem-img img,
  .pt-tall-img img,
  .pt-persona-img img,
  .pt-interview-img img,
  .pt-wireframe-img img,
  .pt-solution-img img,
  .pt-mood .moodboard-image img {
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  .pt-task-grid .taskflow-gif {
    height: 430px !important;
  }

  .pt-gif-box {
    height: 260px !important;
  }
}



/* ===== Conclusion section fix: Timewise + PolyTrip ===== */
.conclusion-section {
  padding-top: 110px;
  padding-bottom: 120px;
}

.conclusion-grid {
  align-items: center;
  gap: 64px;
}

.conclusion-text h2 {
  margin-top: 0;
  margin-bottom: 18px;
}

.conclusion-text h2 + p {
  margin-top: 0;
}

.conclusion-text p + h2 {
  margin-top: 42px;
}

.conclusion-image {
  width: 100%;
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}

.conclusion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Makes Timewise image treatment match PolyTrip clean image style */
.clean-image {
  border-radius: 34px;
  overflow: hidden;
  background: #f4f4f4;
}

.clean-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .conclusion-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .conclusion-image {
    min-height: 360px;
  }
}

@media (max-width: 600px) {
  .conclusion-section {
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .conclusion-image {
    min-height: 300px;
    border-radius: 26px;
  }
}

/* Timewise images same rounded style as PolyTrip */
.tw-image,
.tw-image img {
  border-radius: 32px;
}

.tw-image {
  overflow: hidden;
}

.tw-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================= */
/* SKILLSWAP IMAGE DESIGN SYSTEM */
/* ============================= */

.ss-image,
.ss-image img,
.ss-problem-img,
.ss-problem-img img,
.ss-tall-img,
.ss-tall-img img,
.ss-persona-img,
.ss-persona-img img,
.ss-wireframe-img,
.ss-wireframe-img img,
.ss-solution-img,
.ss-solution-img img,
.ss-conclusion-img,
.ss-conclusion-img img,
.moodboard-image,
.moodboard-image img {
  border-radius: 32px;
}

.ss-image,
.ss-problem-img,
.ss-tall-img,
.ss-persona-img,
.ss-wireframe-img,
.ss-solution-img,
.ss-conclusion-img,
.moodboard-image {
  overflow: hidden;
  position: relative;
  background: #f4f4f4;
}

.ss-image img,
.ss-problem-img img,
.ss-tall-img img,
.ss-persona-img img,
.ss-wireframe-img img,
.ss-solution-img img,
.ss-conclusion-img img,
.moodboard-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================= */
/* PROBLEM SECTION */
/* ============================= */

.ss-problem-img {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
}

/* ============================= */
/* DEFINE SECTION */
/* ============================= */

.ss-tall-img {
  width: 100%;
  max-width: 580px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
}

/* ============================= */
/* RESEARCH INTERVIEW */
/* ============================= */

.ss-interview-img {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
}

/* ============================= */
/* PERSONA */
/* ============================= */

.ss-persona-img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  margin: 0 auto 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

/* ============================= */
/* MOODBOARD */
/* ============================= */

.ss-moodboard {
  padding: 120px 8%;
}

.moodboard-image {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 24px 70px rgba(0,0,0,0.14);
}

/* ============================= */
/* TASKFLOW GIF CARDS */
/* ============================= */

.taskflow-gif {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 22px;
}

.taskflow-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================= */
/* DESIGN PROCESS */
/* ============================= */

.ss-wireframe-img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

/* ============================= */
/* FINAL SOLUTION */
/* ============================= */

.ss-solution-img {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  margin: 48px auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.14);
}

/* ============================= */
/* CONCLUSION */
/* ============================= */

.ss-conclusion-section {
  padding: 140px 8%;
}

.ss-conclusion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

.ss-conclusion-img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.14);
}

.ss-conclusion-text h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  margin-bottom: 28px;
}

.ss-conclusion-text p {
  font-size: 17px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 22px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 900px) {

  .ss-conclusion-grid,
  .ss-two-col,
  .ss-persona-grid,
  .ss-task-grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }

  .ss-problem-img,
  .ss-tall-img,
  .ss-interview-img,
  .ss-persona-img,
  .ss-wireframe-img,
  .ss-solution-img,
  .ss-conclusion-img,
  .moodboard-image {
    max-width: 100%;
  }

  .ss-conclusion-section {
    padding: 100px 6%;
  }
}

@media (max-width: 600px) {

  .ss-conclusion-text h2 {
    font-size: 36px;
  }

  .ss-conclusion-text p {
    font-size: 16px;
  }

  .ss-image,
  .ss-problem-img,
  .ss-tall-img,
  .ss-persona-img,
  .ss-wireframe-img,
  .ss-solution-img,
  .ss-conclusion-img,
  .moodboard-image,
  .taskflow-gif {
    border-radius: 24px;
  }
}

/* =========================
   SKILLSWAP MATCH TIMEWISE / POLYTRIP
   ADD TO BOTTOM OF style.css
========================= */

/* HMW */
.ss-hmw-section {
  background: #ffffff;
  text-align: center;
}

.ss-hmw-wrap {
  width: min(1050px, 100%);
  margin: 0 auto;
}

.ss-hmw-wrap p {
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.18;
  letter-spacing: -1.5px;
  font-weight: 700;
  color: #7a46de;
}

/* Images same as Timewise / PolyTrip */
.ss-image,
.ss-image img,
.clean-image,
.clean-image img {
  border-radius: 30px;
}

.ss-image,
.clean-image {
  overflow: hidden;
  background: #e7dcff;
}

.ss-image img,
.clean-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Task Flow same structure */
.ss-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
}

.ss-task-grid > div {
  padding: 0 42px;
  border-right: 1px solid #dacaf8;
}

.ss-task-grid > div:first-child {
  padding-left: 0;
}

.ss-task-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.ss-task-gif-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 30px;
  overflow: hidden;
  background: #e7dcff;
  margin-bottom: 22px;
}

.ss-task-gif-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Moodboard */
.ss-moodboard-section {
  background: #ffffff;
}

.ss-moodboard-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  background: #e7dcff;
  box-shadow: 0 18px 45px rgba(92, 46, 197, 0.08);
}

.ss-moodboard-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Design Process */
.ss-wireframe-img {
  aspect-ratio: 3 / 4;
  background: #f7f2ff;
  border: 1px solid #dacaf8;
  margin-bottom: 18px;
}

/* Solution */
.ss-solution-img {
  max-width: 1100px;
  aspect-ratio: 16 / 7;
  margin: 0 auto 44px;
}

/* Conclusion same as Timewise / PolyTrip */
.ss-conclusion-section .conclusion-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.ss-conclusion-section .conclusion-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 30px;
  overflow: hidden;
  background: #e7dcff;
}

.ss-conclusion-section .conclusion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 1200px) {
  .ss-task-grid,
  .ss-conclusion-section .conclusion-grid {
    grid-template-columns: 1fr;
  }

  .ss-task-grid > div {
    border-right: none;
    border-bottom: 1px solid #dacaf8;
    padding: 0 0 32px;
  }

  .ss-task-grid > div:last-child {
    border-bottom: none;
  }
}

/* =========================
   SKILLSWAP HMW FIX
========================= */

.ss-hmw {
  width: 100%;
  padding: 120px 6%;
  background: #ffffff;
}

.ss-hmw .hmw-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  text-align: center;
}

.ss-hmw .hmw-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: #7a46de;
}

.ss-hmw .hmw-title {
  max-width: 1050px;
  margin: 0 auto;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.22;
  letter-spacing: -1.8px;
  font-weight: 700;
  color: #7a46de;
}

/* =========================
   SKILLSWAP MOODBOARD
========================= */

.ss-mood {
  width: 100%;
  padding: 130px 6%;
  background: #ffffff;
}

.ss-mood .moodboard-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.ss-mood .tw-center {
  text-align: center;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.1;
  letter-spacing: -2px;
  margin-bottom: 60px;
  color: #1d1233;
}

.ss-mood .moodboard-image {
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #e7dcff;
  box-shadow: 0 24px 70px rgba(92, 46, 197, 0.12);
}

.ss-mood .moodboard-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =========================
   SKILLSWAP MOODBOARD + TASKFLOW FIX
========================= */

.ss-mood {
  width: 100%;
  padding: 130px 6%;
  background: #ffffff;
}

.ss-mood .moodboard-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.ss-mood .moodboard-title {
  text-align: center;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 800;
  color: #7a46de;
  margin-bottom: 70px;
}

.ss-mood .moodboard-image {
  width: 100%;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.ss-mood .moodboard-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Task flow same as Timewise / PolyTrip */
.ss-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
}

.ss-task-grid > div {
  padding: 0 42px;
  border-right: 1px solid #dacaf8;
}

.ss-task-grid > div:first-child {
  padding-left: 0;
}

.ss-task-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.taskflow-gif {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 30px;
  overflow: hidden;
  background: #e7dcff;
  margin-bottom: 22px;
  box-shadow: 0 18px 45px rgba(92, 46, 197, 0.08);
}

.taskflow-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-task-card-large {
  padding: 90px 70px;
}

.ss-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 60px;
}

.ss-task-item-large {
  display: flex;
  flex-direction: column;
}

.ss-task-gif-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 34px;
  overflow: hidden;
  background: #ececec;
  margin-bottom: 28px;
}

.ss-task-gif-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-task-item-large h3 {
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 18px;
  color: #111111;
}

.ss-task-item-large p {
  font-size: 20px;
  line-height: 1.8;
  color: #333333;
}

/* =========================
   MOODBOARD FIX
========================= */

.ss-mood {
  padding: 120px 6%;
  background: #ffffff;
}

.ss-mood .moodboard-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.ss-mood .moodboard-title {
  text-align: center;
  font-size: clamp(54px, 5vw, 82px);
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
  color: #7e9f88;
  margin-bottom: 70px;
}

.ss-mood .moodboard-image {
  width: 100%;
}

.ss-mood .moodboard-image img {
  width: 100%;
  height: auto;
  display: block;
}

html {
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(55px) scale(0.98);
  filter: blur(8px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease,
    filter 0.9s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.header {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #3b82f6, #22c55e);
  z-index: 9999;
  transition: width 0.12s ease;
}

.case-row,
.about-card,
.experience-card,
.tw-card,
.tw-process-item,
.tw-insight,
.tw-persona-card,
.pt-card,
.pt-process-item,
.pt-insight,
.pt-persona-card,
.ss-card,
.ss-process-item,
.ss-insight,
.ss-persona-card,
.gallery-item,
.project-item,
.contact-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.case-row:hover,
.about-card:hover,
.experience-card:hover,
.tw-card:hover,
.tw-process-item:hover,
.tw-insight:hover,
.tw-persona-card:hover,
.pt-card:hover,
.pt-process-item:hover,
.pt-insight:hover,
.pt-persona-card:hover,
.ss-card:hover,
.ss-process-item:hover,
.ss-insight:hover,
.ss-persona-card:hover,
.gallery-item:hover,
.project-item:hover,
.contact-card:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14);
}

.btn,
.about-btn,
.tw-btn,
.pt-btn,
.ss-btn,
.footer-btn,
.project-link-btn,
.green-link,
.blue-link,
.purple-link,
.nav a {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.hero-image-box,
.case-image,
.tw-image,
.pt-image,
.ss-image,
.gallery-img,
.project-img,
.about-photo {
  overflow: hidden;
}

.hero-image-box img,
.case-image img,
.tw-image img,
.pt-image img,
.ss-image img,
.gallery-img img,
.project-img img,
.about-photo img {
  transition: transform 0.6s ease;
  will-change: transform;
}

.custom-cursor,
.custom-cursor-dot {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.custom-cursor {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    border 0.25s ease;
}

.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: #111111;
  border-radius: 50%;
}

.custom-cursor.cursor-hover {
  width: 64px;
  height: 64px;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.55);
}

@media (max-width: 768px) {
  .custom-cursor,
  .custom-cursor-dot {
    display: none;
  }

  .reveal {
    transform: translateY(35px);
    filter: blur(4px);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(10px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.title-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(35px) rotateX(80deg);
  animation: letterReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes letterReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.header {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22c55e, #f59e0b);
  z-index: 99999;
  transition: width 0.12s ease;
}

.case-row,
.about-card,
.experience-card,
.tw-card,
.tw-process-item,
.tw-insight,
.tw-persona-card,
.pt-card,
.pt-process-item,
.pt-insight,
.pt-persona-card,
.ss-card,
.ss-process-item,
.ss-insight,
.ss-persona-card,
.gallery-item,
.project-item,
.contact-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.case-row::before,
.about-card::before,
.experience-card::before,
.tw-card::before,
.tw-process-item::before,
.tw-insight::before,
.tw-persona-card::before,
.pt-card::before,
.pt-process-item::before,
.pt-insight::before,
.pt-persona-card::before,
.ss-card::before,
.ss-process-item::before,
.ss-insight::before,
.ss-persona-card::before,
.gallery-item::before,
.project-item::before,
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.5),
    transparent 34%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.case-row:hover::before,
.about-card:hover::before,
.experience-card:hover::before,
.tw-card:hover::before,
.tw-process-item:hover::before,
.tw-insight:hover::before,
.tw-persona-card:hover::before,
.pt-card:hover::before,
.pt-process-item:hover::before,
.pt-insight:hover::before,
.pt-persona-card:hover::before,
.ss-card:hover::before,
.ss-process-item:hover::before,
.ss-insight:hover::before,
.ss-persona-card:hover::before,
.gallery-item:hover::before,
.project-item:hover::before,
.contact-card:hover::before {
  opacity: 1;
}

.case-row:hover,
.about-card:hover,
.experience-card:hover,
.tw-card:hover,
.tw-process-item:hover,
.tw-insight:hover,
.tw-persona-card:hover,
.pt-card:hover,
.pt-process-item:hover,
.pt-insight:hover,
.pt-persona-card:hover,
.ss-card:hover,
.ss-process-item:hover,
.ss-insight:hover,
.ss-persona-card:hover,
.gallery-item:hover,
.project-item:hover,
.contact-card:hover {
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.16);
}

.btn,
.about-btn,
.tw-btn,
.pt-btn,
.ss-btn,
.footer-btn,
.project-link-btn,
.green-link,
.blue-link,
.purple-link,
.nav a,
.contact-info-item,
.contact-socials a {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.hero-image-box,
.case-image,
.tw-image,
.pt-image,
.ss-image,
.gallery-img,
.project-img,
.about-photo,
.moodboard-image {
  overflow: hidden;
}

.hero-image-box img,
.case-image img,
.tw-image img,
.pt-image img,
.ss-image img,
.gallery-img img,
.project-img img,
.about-photo img,
.moodboard-image img {
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.65s ease;
  will-change: transform;
}

.hero-image-box:hover img,
.case-image:hover img,
.tw-image:hover img,
.pt-image:hover img,
.ss-image:hover img,
.gallery-img:hover img,
.project-img:hover img,
.about-photo:hover img,
.moodboard-image:hover img {
  filter: saturate(1.12) contrast(1.04);
}

section,
main,
footer {
  position: relative;
}

.section-orb {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

section:hover .section-orb,
main:hover .section-orb,
footer:hover .section-orb {
  opacity: 1;
}

.custom-cursor,
.custom-cursor-dot {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 100000;
}

.custom-cursor {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    border 0.25s ease;
}

.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: #111111;
  border-radius: 50%;
}

.custom-cursor.cursor-hover {
  width: 68px;
  height: 68px;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.6);
}

.click-burst {
  pointer-events: none;
  position: fixed;
  width: 12px;
  height: 12px;
  border: 2px solid #7c3aed;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: clickBurst 0.65s ease-out forwards;
  z-index: 100001;
}

@keyframes clickBurst {
  to {
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .custom-cursor,
  .custom-cursor-dot,
  .section-orb {
    display: none;
  }

  .reveal {
    transform: translateY(35px);
    filter: blur(4px);
  }
}

.ss-mood {
  padding: 90px 8%;
  background: #ffffff;
}

.ss-mood .moodboard-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ss-mood .moodboard-title {
  font-size: 56px;
  font-weight: 800;
  color: #7b4ce2;
  margin-bottom: 55px;
  line-height: 1.1;
}

.ss-mood .moodboard-image {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.ss-mood .moodboard-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.ss-mood .moodboard-title {
  color: #7b4ce2 !important;
}

.ss-task-card-large,
.ss-card {
  padding: 70px;
  border-radius: 32px;
}

.ss-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.ss-task-item-large {
  padding: 28px;
  border-radius: 28px;
  background: #ffffff;
}

.ss-task-gif-box {
  width: 100%;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
}

.ss-task-gif-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-task-item-large h3 {
  font-size: 28px;
  margin-bottom: 18px;
}

.ss-task-item-large p {
  font-size: 17px;
  line-height: 1.8;
}

.ss-prototype-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 34px;
  margin-top: 60px;
}

.ss-wireframe-img {
  width: 100%;
  height: 340px;
  border-radius: 26px;
  overflow: hidden;
}

.ss-wireframe-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-prototype-row p {
  font-size: 18px;
  margin-top: 18px;
}

.ss-prototype-row a {
  font-size: 16px;
}

.ss-arrow {
  font-size: 44px;
  font-weight: 700;
}

.ss-task-card-large {
  padding: 80px 70px !important;
  border-radius: 38px !important;
}

.ss-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 52px !important;
  margin-top: 60px !important;
}

.ss-task-item-large {
  width: 100% !important;
}

.ss-task-gif-box {
  width: 100% !important;
  height: 520px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background: #dcdcdc !important;
  margin-bottom: 34px !important;
}

.ss-task-gif-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ss-task-item-large h3 {
  font-size: 34px !important;
  line-height: 1.15 !important;
  margin-bottom: 24px !important;
  font-weight: 800 !important;
  color: #111111 !important;
}

.ss-task-item-large p {
  font-size: 18px !important;
  line-height: 1.9 !important;
  color: #3f3f3f !important;
}

.ss-center {
  font-size: 72px !important;
  margin-bottom: 20px !important;
  font-weight: 800 !important;
}

.ss-task-card-large {
  width: min(1280px, 100%) !important;
  padding: 80px 64px !important;
  border-radius: 38px !important;
  overflow: hidden !important;
}

.ss-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin-top: 72px !important;
}

.ss-task-grid > div {
  padding: 0 !important;
  border-right: none !important;
}

.ss-task-item-large {
  min-width: 0 !important;
}

.ss-task-gif-box {
  width: 100% !important;
  height: 620px !important;
  border-radius: 34px !important;
  background: #d9d9d9 !important;
  overflow: hidden !important;
  margin-bottom: 34px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12) !important;
}

.ss-task-gif-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ss-task-item-large h3 {
  font-size: 38px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 24px !important;
  font-weight: 800 !important;
  color: #1d1233 !important;
}

.ss-task-item-large p {
  font-size: 20px !important;
  line-height: 1.9 !important;
  color: #2d2440 !important;
}

.ss-card .ss-center {
  font-size: 64px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  color: #1d1233 !important;
}

@media (max-width: 1200px) {
  .ss-task-grid {
    grid-template-columns: 1fr !important;
  }

  .ss-task-gif-box {
    height: 520px !important;
  }
}
.ss-section .ss-card {
  width: min(1280px, 100%) !important;
  margin: 0 auto !important;
  padding: 90px 70px !important;
  border-radius: 42px !important;
}

.ss-prototype-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 44px !important;
  margin-top: 70px !important;
}

.ss-wireframe-img {
  width: 100% !important;
  height: 640px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1) !important;
}

.ss-wireframe-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ss-prototype-row p {
  font-size: 22px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-top: 26px !important;
  font-weight: 600 !important;
  color: #24153d !important;
}

.ss-prototype-row a {
  display: block !important;
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.ss-arrow {
  font-size: 64px !important;
  font-weight: 800 !important;
  color: #8b5cf6 !important;
}

.ss-card .ss-center {
  font-size: 68px !important;
  font-weight: 800 !important;
  color: #1d1233 !important;
  margin-bottom: 10px !important;
}

.conclusion-image,
.conclusion-image img,
.clean-image {
  background: transparent !important;
}

.taskflow-gif {
  width: 100%;
  height: 620px;
  border-radius: 34px;
  overflow: hidden;
  background: #dcdcdc;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

.taskflow-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pt-task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  margin-top: 70px;
}

.taskflow-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 34px 30px 38px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
}

.taskflow-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(79, 70, 229, 0.18);
}

.taskflow-gif {
  width: 100%;
  height: 760px;
  border-radius: 30px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 28px;
}

.taskflow-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

.taskflow-card h3 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: #101828;
  margin-bottom: 18px;
}

.taskflow-card p {
  font-size: 20px;
  line-height: 1.9;
  color: #475467;
}

@media (max-width: 1200px) {
  .pt-task-grid {
    grid-template-columns: 1fr;
  }

  .taskflow-gif {
    height: auto;
  }
}

/* =========================
   TIMEWISE HERO MOCKUP FINAL FIX
========================= */

.tw-hero {
  width: 100% !important;
  min-height: 720px !important;
  padding: 0 6% !important;
  background: linear-gradient(135deg, #eef4ef 0%, #dce9df 32%, #1f4a33 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.tw-hero-inner {
  width: min(1500px, 100%) !important;
  min-height: 720px !important;
  display: grid !important;
  grid-template-columns: 1.35fr 0.85fr !important;
  gap: 90px !important;
  align-items: center !important;
}

.tw-gif-box {
  display: none !important;
}

.tw-hero-mockup {
  position: relative !important;
  width: 100% !important;
  height: 720px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
}

.tw-hero-mockup img {
  width: 100% !important;
  max-width: 980px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transform: translateY(112px) !important;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.28)) !important;
}

.tw-hero-text {
  position: relative !important;
  z-index: 2 !important;
}

.tw-hero-text h1 {
  font-size: 72px !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -3px !important;
  margin-bottom: 18px !important;
  color: #111111 !important;
}

.tw-hero-text p {
  font-size: 22px !important;
  color: #1f1f1f !important;
  margin-bottom: 38px !important;
  line-height: 1.6 !important;
}

.tw-buttons {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.tw-btn {
  min-width: 210px !important;
  height: 60px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: 0.25s ease !important;
}

.tw-btn.primary {
  background: #ffffff !important;
  color: #16362a !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.tw-btn.secondary {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(10px) !important;
}

.tw-btn:hover {
  transform: translateY(-3px) !important;
}

.tw-btn.primary:hover {
  background: #16362a !important;
  color: #ffffff !important;
}

.tw-btn.secondary:hover {
  background: #ffffff !important;
  color: #16362a !important;
}

@media (max-width: 1200px) {
  .tw-hero {
    padding: 70px 6% 0 !important;
  }

  .tw-hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 40px !important;
  }

  .tw-hero-mockup {
    height: auto !important;
  }

  .tw-hero-mockup img {
    max-width: 760px !important;
    transform: translateY(70px) !important;
  }

  .tw-buttons {
    justify-content: center !important;
  }
}


/* =========================
   POLYTRIP HERO MOCKUP FINAL
   Replaces the old dashed GIF placeholder with the woman phone mockup
========================= */

.pt-hero {
  width: 100% !important;
  min-height: 720px !important;
  background: linear-gradient(
    135deg,
    #eef7ff 0%,
    #d8ebff 32%,
    #0d4f8b 100%
  ) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 6% !important;
}

.pt-hero-inner {
  width: min(1400px, 92%) !important;
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 90px !important;
  align-items: center !important;
}

.pt-gif-box {
  display: none !important;
}

.pt-hero-mockup {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: 720px !important;
}

.pt-hero-mockup img {
  width: 100% !important;
  max-width: 980px !important;
  object-fit: contain !important;
  display: block !important;
  transform: translateY(115px) !important;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.28)) !important;
}

.pt-hero-text {
  position: relative !important;
  z-index: 2 !important;
}

.pt-hero-text h1 {
  font-size: 72px !important;
  line-height: 0.95 !important;
  font-weight: 700 !important;
  letter-spacing: -3px !important;
  margin-bottom: 18px !important;
  color: #102033 !important;
}

.pt-hero-text p {
  font-size: 22px !important;
  color: #102033 !important;
  margin-bottom: 38px !important;
  line-height: 1.6 !important;
}

.pt-buttons {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.pt-btn {
  min-width: 210px !important;
  height: 60px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: 0.25s ease !important;
}

.pt-btn.primary {
  background: #ffffff !important;
  color: #0d4f8b !important;
  box-shadow: 0 12px 28px rgba(13, 79, 139, 0.18) !important;
}

.pt-btn.secondary {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) !important;
}

.pt-btn:hover {
  transform: translateY(-3px) !important;
}

.pt-btn.primary:hover {
  background: #0d4f8b !important;
  color: #ffffff !important;
}

.pt-btn.secondary:hover {
  background: #ffffff !important;
  color: #0d4f8b !important;
}

@media (max-width: 1200px) {
  .pt-hero {
    padding: 80px 6% 0 !important;
  }

  .pt-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    text-align: center !important;
  }

  .pt-hero-mockup {
    min-height: auto !important;
    order: 2 !important;
  }

  .pt-hero-text {
    order: 1 !important;
  }

  .pt-buttons {
    justify-content: center !important;
  }

  .pt-hero-mockup img {
    max-width: 720px !important;
    transform: translateY(70px) !important;
  }
}

@media (max-width: 768px) {
  .pt-hero-text h1 {
    font-size: 46px !important;
    letter-spacing: -1.8px !important;
  }

  .pt-hero-text p {
    font-size: 18px !important;
  }

  .pt-btn {
    width: 100% !important;
  }

  .pt-hero-mockup img {
    max-width: 540px !important;
    transform: translateY(55px) !important;
  }
}

.pt-hero-mockup {
  height: 720px !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
}

.pt-hero-mockup img {
  max-width: 760px !important;
  transform: translateY(0) !important;
  object-fit: contain !important;
}

/* =========================
   SKILLSWAP TASK FLOW UPDATE
========================= */

.ss-task-card-large {
  padding: 72px 64px 78px;
  border-radius: 34px;
}

.ss-task-card-large .ss-center {
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -2.5px;
  margin-bottom: 68px;
  color: #1d1233;
  font-weight: 800;
}

.ss-task-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  margin-top: 0;
}

.ss-task-grid-two > div {
  padding: 0;
  border-right: none;
}

.ss-task-item-large h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -1.3px;
  margin: 34px 0 22px;
  color: #1d1233;
  font-weight: 800;
}

.ss-task-item-large p {
  max-width: 560px;
  font-size: 19px;
  line-height: 1.85;
  color: #2d2440;
}

.ss-task-gif-box {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  border-radius: 28px;
  overflow: hidden;
  background: #eee6ff;
  box-shadow: 0 24px 55px rgba(92, 46, 197, 0.13);
}

.ss-task-gif-box img,
.ss-task-gif-box video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ss-task-video-box video {
  object-fit: cover;
}

@media (max-width: 900px) {
  .ss-task-card-large {
    padding: 48px 28px;
  }

  .ss-task-grid-two {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .ss-task-item-large p {
    max-width: 100%;
  }
}

.ss-hero-mockup-box {
  width: min(620px, 100%);
  height: 360px;
  border: none;
  background: transparent;
  box-shadow: 0 28px 70px rgba(59, 20, 125, 0.2);
}

.ss-hero-mockup-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

.ss-hero-inner {
  grid-template-columns: 1.15fr 0.85fr;
}

.ss-task-single {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.ss-task-video-wide {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 30px;
  overflow: hidden;
  background: #eee6ff;
  box-shadow: 0 28px 70px rgba(92, 46, 197, 0.16);
  margin-bottom: 42px;
}

.ss-task-video-wide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-task-single h3 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: #1d1233;
  margin-bottom: 22px;
  font-weight: 800;
}

.ss-task-single p {
  max-width: 780px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.85;
  color: #2d2440;
}

@media (max-width: 900px) {
  .ss-hero-inner {
    grid-template-columns: 1fr;
  }

  .ss-hero-mockup-box {
    height: 260px;
  }
}

/* =========================
   TASK FLOW CARD TEXT FIX
========================= */

.tw-task-grid,
.pt-task-grid,
.ss-task-grid {
  gap: 34px;
}

.tw-task-grid > div,
.pt-task-grid > div,
.ss-task-grid > div {
  padding: 0 28px 34px;
}

.tw-task-grid h3,
.pt-task-grid h3,
.ss-task-grid h3,
.ss-task-item-large h3 {
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 26px 0 18px;
}

.tw-task-grid p,
.pt-task-grid p,
.ss-task-grid p,
.ss-task-item-large p {
  font-size: 17px;
  line-height: 1.75;
  color: #4a5668;
}

.tw-task-grid .tw-image,
.pt-task-grid .pt-image,
.ss-task-gif-box {
  margin-bottom: 24px;
}

.tw-task-grid img,
.pt-task-grid img,
.ss-task-grid img,
.ss-task-grid video {
  object-fit: cover;
}

/* phone/image card breathing room */
.tw-task-grid > div,
.pt-task-grid > div {
  border-radius: 28px;
  overflow: hidden;
}

/* smaller screens */
@media (max-width: 1100px) {
  .tw-task-grid,
  .pt-task-grid,
  .ss-task-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .tw-task-grid > div,
  .pt-task-grid > div,
  .ss-task-grid > div {
    padding: 0 0 34px;
    border-right: none;
  }
}

.tw-task-grid,
.pt-task-grid,
.ss-task-grid {
  gap: 40px !important;
}

.tw-task-grid > div,
.pt-task-grid > div,
.ss-task-grid > div {
  padding: 0 24px 36px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

.tw-task-grid h3,
.pt-task-grid h3,
.ss-task-grid h3,
.ss-task-item-large h3 {
  font-size: 30px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.4px !important;
  margin-top: 24px !important;
  margin-bottom: 18px !important;
  max-width: 90% !important;
}

.tw-task-grid p,
.pt-task-grid p,
.ss-task-grid p,
.ss-task-item-large p {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #536072 !important;
  max-width: 92% !important;
}

.tw-task-grid img,
.pt-task-grid img,
.ss-task-grid img,
.ss-task-grid video {
  display: block !important;
  width: 100% !important;
  object-fit: cover !important;
}

.tw-task-grid .tw-image,
.pt-task-grid .pt-image,
.ss-task-gif-box,
.ss-task-video-wide {
  margin-bottom: 22px !important;
}

/* image height consistency */
.tw-task-grid .tw-image,
.pt-task-grid .pt-image {
  min-height: 620px !important;
}

/* mobile */
@media (max-width: 1100px) {
  .tw-task-grid,
  .pt-task-grid,
  .ss-task-grid {
    grid-template-columns: 1fr !important;
  }

  .tw-task-grid h3,
  .pt-task-grid h3,
  .ss-task-grid h3 {
    font-size: 26px !important;
  }
}

/* =========================
   NAVBAR LOGO
========================= */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #111111;
  line-height: 1;
}

.header {
  align-items: center;
}

/* =========================================================
   FINAL REQUESTED UPDATES
   Add this at the VERY BOTTOM of style.css
========================================================= */

/* =========================
   FONT IMPORTS
========================= */

@import url('https://fonts.cdnfonts.com/css/garet');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');


/* =========================
   GLOBAL FONT: GARET
   Home / About / Gallery / Project / Contact
========================= */

body,
body * {
  font-family: 'Garet', Arial, sans-serif;
}


/* =========================
   HOME CASE STUDY COLORS
========================= */

.green,
.green-title,
.green-link,
.timewise-exp span,
.timewise-exp h3 {
  color: #05540c !important;
}

.blue,
.blue-title,
.blue-link,
.polytrip-exp span,
.polytrip-exp h3 {
  color: #5667cc !important;
}

.purple,
.purple-title,
.purple-link,
.skillswap-exp span,
.skillswap-exp h3 {
  color: #823ef3 !important;
}


/* =========================
   TIMEWISE PAGE FONT
   Entire Timewise page = Arial
========================= */

.timewise-page,
.timewise-page * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Timewise heading color only */
.timewise-page .tw-hero-text h1,
.timewise-page .tw-section-label,
.timewise-page .tw-text h2,
.timewise-page .tw-card h2,
.timewise-page .tw-persona-card h2,
.timewise-page .tw-reveal-card h2,
.timewise-page .tw-text h3,
.timewise-page .tw-text h4,
.timewise-page .tw-process-item h3,
.timewise-page .tw-task-grid h3,
.timewise-page .hmw-label,
.timewise-page .hmw-title,
.timewise-page .taskflow-card h3,
.timewise-page .moodboard-title,
.timewise-page .sketch-title,
.timewise-page .final-title {
  color: #05540c !important;
}

/* Paragraphs stay original */
.timewise-page p,
.timewise-page li {
  color: inherit;
}


/* =========================
   POLYTRIP PAGE FONT
   Entire PolyTrip page = Noto Sans KR
========================= */

.polytrip-page,
.polytrip-page * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* PolyTrip heading color only */
.polytrip-page .pt-hero-text h1,
.polytrip-page .pt-section-label,
.polytrip-page .pt-text h2,
.polytrip-page .pt-card h2,
.polytrip-page .pt-persona-card h2,
.polytrip-page .pt-reveal-card h2,
.polytrip-page .pt-text h3,
.polytrip-page .pt-text h4,
.polytrip-page .pt-process-item h3,
.polytrip-page .pt-task-grid h3,
.polytrip-page .hmw-label,
.polytrip-page .hmw-title,
.polytrip-page .taskflow-card h3,
.polytrip-page .moodboard-title,
.polytrip-page .sketch-title,
.polytrip-page .final-title {
  color: #5667cc !important;
}

/* Paragraphs stay original */
.polytrip-page p,
.polytrip-page li {
  color: inherit;
}


/* =========================
   SKILLSWAP PAGE FONT
   Entire SkillSwap page = Inter
========================= */

.skillswap-page,
.skillswap-page * {
  font-family: 'Inter', sans-serif !important;
}

/* SkillSwap heading color only */
.skillswap-page .ss-hero-text h1,
.skillswap-page .ss-section-label,
.skillswap-page .ss-text h2,
.skillswap-page .ss-card h2,
.skillswap-page .ss-persona-card h2,
.skillswap-page .ss-reveal-card h2,
.skillswap-page .ss-text h3,
.skillswap-page .ss-text h4,
.skillswap-page .ss-process-item h3,
.skillswap-page .ss-task-grid h3,
.skillswap-page .hmw-label,
.skillswap-page .hmw-title,
.skillswap-page .taskflow-card h3,
.skillswap-page .moodboard-title,
.skillswap-page .sketch-title,
.skillswap-page .final-title {
  color: #823ef3 !important;
}

/* Paragraphs stay original */
.skillswap-page p,
.skillswap-page li {
  color: inherit;
}


/* =========================================================
   IMAGE GALLERY + PROJECT GALLERY PERSONAL BRANDING ONLY
   Navy / Gold / Black accents
   Backgrounds untouched
========================================================= */

/* Image Gallery */
.image-gallery-page .gallery-eyebrow,
.image-gallery-page .gallery-number {
  color: #c6a76a !important;
}

.image-gallery-page .gallery-hero h1,
.image-gallery-page .gallery-info h2 {
  color: #0f172a !important;
}

.image-gallery-page .gallery-info h4 {
  color: #111111 !important;
}

.image-gallery-page .gallery-item {
  border: 1px solid rgba(198, 167, 106, 0.28) !important;
}

.image-gallery-page .gallery-item::before {
  background: radial-gradient(circle, rgba(198, 167, 106, 0.12), transparent 70%) !important;
}

/* Project Gallery */
.project-page .project-eyebrow,
.project-page .project-number,
.project-page .blue-project-number,
.project-page .purple-project-number {
  color: #c6a76a !important;
}

.project-page .project-hero h1,
.project-page .project-info h2 {
  color: #0f172a !important;
}

.project-page .project-info h4 {
  color: #111111 !important;
}

.project-page .project-item {
  border: 1px solid rgba(198, 167, 106, 0.28) !important;
}

.project-page .project-item::before {
  background: radial-gradient(circle, rgba(198, 167, 106, 0.12), transparent 70%) !important;
}

.project-page .project-link-btn {
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22) !important;
}

.project-page .project-link-btn:hover {
  background: #000000 !important;
}


/* =========================================================
   USER PERSONA REBUILD
   DO NOT USE IMAGE PASTE
   This styles HTML-built persona cards to match your references
========================================================= */

.tw-persona-card,
.pt-persona-card,
.ss-persona-card {
  overflow: hidden;
}

/* Hide old persona image blocks if they still exist */
.tw-persona-img,
.pt-persona-img,
.ss-persona-img,
.persona-image-wrapper,
.persona-image {
  display: none !important;
}


/* =========================
   SHARED PERSONA LAYOUT
========================= */

.persona-custom {
  width: 100%;
  border-radius: 28px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}

.persona-custom-header {
  padding: 42px 52px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 42px;
  align-items: center;
}

.persona-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.65);
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-name-block h3 {
  font-size: 46px;
  line-height: 1;
  letter-spacing: -1.6px;
  margin-bottom: 14px;
  color: #ffffff !important;
}

.persona-name-block p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92) !important;
}

.persona-custom-body {
  padding: 46px 52px 54px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 1fr;
  gap: 42px;
  align-items: start;
}

.persona-panel {
  background: #f8f8f8;
  border-radius: 22px;
  padding: 28px;
}

.persona-panel h4 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.3px;
}

.persona-panel p,
.persona-panel li {
  font-size: 15.5px;
  line-height: 1.85;
  color: #333333 !important;
}

.persona-panel ul {
  padding-left: 18px;
}

.persona-info-list {
  display: grid;
  gap: 12px;
}

.persona-info-list div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.5;
}

.persona-info-list strong {
  font-weight: 800;
}

.persona-quote {
  grid-column: 1 / -1;
  border-radius: 22px;
  padding: 28px 34px;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}


/* =========================
   TIMEWISE PERSONA STYLE
   Similar to second reference image
========================= */

.timewise-page .persona-custom-header {
  background: linear-gradient(135deg, #d7e7d8 0%, #7ea47e 45%, #05540c 100%);
}

.timewise-page .persona-panel h4,
.timewise-page .persona-info-list strong {
  color: #05540c !important;
}

.timewise-page .persona-quote {
  background: #eef6ef;
  color: #05540c !important;
}

.timewise-page .persona-panel {
  background: #f5faf5;
}


/* =========================
   POLYTRIP PERSONA STYLE
   Similar to third reference image
========================= */

.polytrip-page .persona-custom-header {
  background: linear-gradient(135deg, #dfe5ff 0%, #8996ee 45%, #5667cc 100%);
}

.polytrip-page .persona-panel h4,
.polytrip-page .persona-info-list strong {
  color: #5667cc !important;
}

.polytrip-page .persona-quote {
  background: #eef1ff;
  color: #5667cc !important;
}

.polytrip-page .persona-panel {
  background: #f5f6ff;
}


/* =========================
   SKILLSWAP PERSONA STYLE
   Similar to fourth reference image
========================= */

.skillswap-page .persona-custom-header {
  background: linear-gradient(135deg, #eadcff 0%, #a779f5 45%, #823ef3 100%);
}

.skillswap-page .persona-panel h4,
.skillswap-page .persona-info-list strong {
  color: #823ef3 !important;
}

.skillswap-page .persona-quote {
  background: #f4edff;
  color: #823ef3 !important;
}

.skillswap-page .persona-panel {
  background: #faf7ff;
}


/* =========================
   RESPONSIVE PERSONA
========================= */

@media (max-width: 1200px) {
  .persona-custom-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .persona-avatar {
    margin: 0 auto;
  }

  .persona-custom-body {
    grid-template-columns: 1fr;
  }

  .persona-info-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 768px) {
  .persona-custom-header {
    padding: 34px 26px;
  }

  .persona-custom-body {
    padding: 32px 24px 38px;
  }

  .persona-name-block h3 {
    font-size: 34px;
  }

  .persona-avatar {
    width: 150px;
    height: 150px;
  }

  .persona-quote {
    font-size: 18px;
  }
}

/* =========================================================
   FINAL FIXED OVERRIDES
========================================================= */

/* GLOBAL FONT */
body,
body * {
  font-family: 'Garet', Arial, sans-serif !important;
}

/* FOOTER PHONE REMOVED LAYOUT FIX */
.footer-info {
  grid-template-columns: 1fr !important;
}

/* HOME CASE STUDY COLORS */
.green,
.green-title,
.green-link,
.timewise-exp span,
.timewise-exp h3 {
  color: #05540c !important;
}

.blue,
.blue-title,
.blue-link,
.polytrip-exp span,
.polytrip-exp h3 {
  color: #5667cc !important;
}

.purple,
.purple-title,
.purple-link,
.skillswap-exp span,
.skillswap-exp h3 {
  color: #823ef3 !important;
}

/* TIMEWISE PAGE FONT */
body:has(.tw-hero),
body:has(.tw-hero) * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* TIMEWISE HEADING COLOR ONLY */
.tw-hero-text h1,
.tw-section-label,
.tw-text h2,
.tw-card h2,
.tw-persona-card h2,
.tw-reveal-card h2,
.tw-text h3,
.tw-text h4,
.tw-process-item h3,
.tw-task-grid h3,
.tw-center,
.tw-hmw .hmw-label,
.tw-hmw .hmw-title,
.tw-step span {
  color: #05540c !important;
}

/* POLYTRIP PAGE FONT */
body:has(.pt-hero),
body:has(.pt-hero) * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* POLYTRIP HEADING COLOR ONLY */
.pt-hero-text h1,
.pt-section-label,
.pt-text h2,
.pt-card h2,
.pt-persona-card h2,
.pt-reveal-card h2,
.pt-text h3,
.pt-text h4,
.pt-process-item h3,
.pt-task-grid h3,
.pt-center,
.pt-hmw .hmw-label,
.pt-hmw .hmw-title,
.pt-step span {
  color: #5667cc !important;
}

/* SKILLSWAP PAGE FONT */
body:has(.ss-hero),
body:has(.ss-hero) * {
  font-family: 'Inter', sans-serif !important;
}

/* SKILLSWAP HEADING COLOR ONLY */
.ss-hero-text h1,
.ss-section-label,
.ss-text h2,
.ss-card h2,
.ss-persona-card h2,
.ss-reveal-card h2,
.ss-text h3,
.ss-text h4,
.ss-process-item h3,
.ss-task-grid h3,
.ss-center,
.ss-hmw .hmw-label,
.ss-hmw .hmw-title,
.ss-step span {
  color: #823ef3 !important;
}

/* IMAGE GALLERY PERSONAL BRANDING ONLY */
.image-gallery-page .gallery-eyebrow,
.image-gallery-page .gallery-number,
.image-gallery-page .blue-number,
.image-gallery-page .yellow-number {
  color: #c6a76a !important;
}

.image-gallery-page .gallery-hero h1,
.image-gallery-page .gallery-info h2 {
  color: #0f172a !important;
}

.image-gallery-page .gallery-info h4 {
  color: #111111 !important;
}

.image-gallery-page .gallery-item {
  border: 1px solid rgba(198, 167, 106, 0.28) !important;
}

.image-gallery-page .gallery-item::before {
  background: radial-gradient(circle, rgba(198, 167, 106, 0.12), transparent 70%) !important;
}

/* PROJECT GALLERY PERSONAL BRANDING ONLY */
.project-page .project-eyebrow,
.project-page .project-number,
.project-page .blue-project-number,
.project-page .purple-project-number {
  color: #c6a76a !important;
}

.project-page .project-hero h1,
.project-page .project-info h2 {
  color: #0f172a !important;
}

.project-page .project-info h4 {
  color: #111111 !important;
}

.project-page .project-item {
  border: 1px solid rgba(198, 167, 106, 0.28) !important;
}

.project-page .project-item::before {
  background: radial-gradient(circle, rgba(198, 167, 106, 0.12), transparent 70%) !important;
}

.project-page .project-link-btn {
  background: #0f172a !important;
  color: #ffffff !important;
}

.project-page .project-link-btn:hover {
  background: #000000 !important;
}

/* PERSONA CARD BASE - HTML 교체 후 적용됨 */
.persona-custom {
  width: 100%;
  border-radius: 28px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}

.persona-custom-header {
  padding: 42px 52px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 42px;
  align-items: center;
}

.persona-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.65);
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-name-block h3 {
  font-size: 46px;
  line-height: 1;
  letter-spacing: -1.6px;
  margin-bottom: 14px;
  color: #ffffff !important;
}

.persona-name-block p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92) !important;
}

.persona-custom-body {
  padding: 46px 52px 54px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 1fr;
  gap: 42px;
  align-items: start;
}

.persona-panel {
  background: #f8f8f8;
  border-radius: 22px;
  padding: 28px;
}

.persona-panel h4 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 18px;
}

.persona-panel p,
.persona-panel li {
  font-size: 15.5px;
  line-height: 1.85;
  color: #333333 !important;
}

.persona-panel ul {
  padding-left: 18px;
}

.persona-info-list {
  display: grid;
  gap: 12px;
}

.persona-info-list div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.5;
}

.persona-info-list strong {
  font-weight: 800;
}

.persona-quote {
  grid-column: 1 / -1;
  border-radius: 22px;
  padding: 28px 34px;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}

/* TIMEWISE PERSONA */
.tw-persona-card .persona-custom-header {
  background: linear-gradient(135deg, #d7e7d8 0%, #7ea47e 45%, #05540c 100%);
}

.tw-persona-card .persona-panel {
  background: #f5faf5;
}

.tw-persona-card .persona-panel h4,
.tw-persona-card .persona-info-list strong {
  color: #05540c !important;
}

.tw-persona-card .persona-quote {
  background: #eef6ef;
  color: #05540c !important;
}

/* POLYTRIP PERSONA */
.pt-persona-card .persona-custom-header {
  background: linear-gradient(135deg, #dfe5ff 0%, #8996ee 45%, #5667cc 100%);
}

.pt-persona-card .persona-panel {
  background: #f5f6ff;
}

.pt-persona-card .persona-panel h4,
.pt-persona-card .persona-info-list strong {
  color: #5667cc !important;
}

.pt-persona-card .persona-quote {
  background: #eef1ff;
  color: #5667cc !important;
}

/* SKILLSWAP PERSONA */
.ss-persona-card .persona-custom-header {
  background: linear-gradient(135deg, #eadcff 0%, #a779f5 45%, #823ef3 100%);
}

.ss-persona-card .persona-panel {
  background: #faf7ff;
}

.ss-persona-card .persona-panel h4,
.ss-persona-card .persona-info-list strong {
  color: #823ef3 !important;
}

.ss-persona-card .persona-quote {
  background: #f4edff;
  color: #823ef3 !important;
}

@media (max-width: 1200px) {
  .persona-custom-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .persona-avatar {
    margin: 0 auto;
  }

  .persona-custom-body {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   STRONGER PERSONAL BRANDING
   Image Gallery + Project Gallery only
   Navy / Gold / Black
========================================================= */

/* IMAGE GALLERY */
.image-gallery-page .gallery-hero h1,
.image-gallery-page .gallery-info h2 {
  color: #28395D !important;
}

.image-gallery-page .gallery-eyebrow,
.image-gallery-page .gallery-number,
.image-gallery-page .blue-number,
.image-gallery-page .yellow-number {
  color: #CBA96B !important;
}

.image-gallery-page .gallery-info h4 {
  color: #000000 !important;
}

.image-gallery-page .gallery-item {
  border: 1.5px solid rgba(203, 169, 107, 0.45) !important;
  box-shadow: 0 24px 70px rgba(40, 57, 93, 0.12) !important;
}

.image-gallery-page .gallery-img {
  border: 3px solid #28395D !important;
  box-shadow: 0 20px 45px rgba(40, 57, 93, 0.18) !important;
}

.image-gallery-page .gallery-item::before {
  background: radial-gradient(circle, rgba(203, 169, 107, 0.22), transparent 70%) !important;
}

/* PROJECT GALLERY */
.project-page .project-hero h1,
.project-page .project-info h2 {
  color: #28395D !important;
}

.project-page .project-eyebrow,
.project-page .project-number,
.project-page .blue-project-number,
.project-page .purple-project-number {
  color: #CBA96B !important;
}

.project-page .project-info h4 {
  color: #000000 !important;
}

.project-page .project-item {
  border: 1.5px solid rgba(203, 169, 107, 0.45) !important;
  box-shadow: 0 24px 70px rgba(40, 57, 93, 0.12) !important;
}

.project-page .project-img {
  border: 3px solid #28395D !important;
  box-shadow: 0 20px 45px rgba(40, 57, 93, 0.18) !important;
}

.project-page .project-link-btn {
  background: #28395D !important;
  color: #F3F3EF !important;
  border: 1px solid #CBA96B !important;
}

.project-page .project-link-btn:hover {
  background: #000000 !important;
  color: #F3F3EF !important;
}

.project-page .project-item::before {
  background: radial-gradient(circle, rgba(203, 169, 107, 0.22), transparent 70%) !important;
}

/* =========================================================
   HERO BACKGROUND REBRAND
   Remove pastel purple feeling
========================================================= */

/* IMAGE GALLERY HERO */
.image-gallery-page .gallery-hero {
  background:
    radial-gradient(
      circle at top left,
      rgba(203, 169, 107, 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(40, 57, 93, 0.08),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #F7F6F2 0%,
      #F3F3EF 45%,
      #EEF1F7 100%
    ) !important;
}

/* PROJECT GALLERY HERO */
.project-page .project-hero {
  background:
    radial-gradient(
      circle at top left,
      rgba(203, 169, 107, 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(40, 57, 93, 0.08),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #F7F6F2 0%,
      #F3F3EF 45%,
      #EEF1F7 100%
    ) !important;
}

/* =========================================================
   CONTACT PAGE REBRAND
   Navy + Gold + Black
========================================================= */

.contact-page .contact-hero {
  background:
    radial-gradient(
      circle at top left,
      rgba(203, 169, 107, 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(40, 57, 93, 0.08),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #F7F6F2 0%,
      #F3F3EF 45%,
      #EEF1F7 100%
    ) !important;
}

/* eyebrow */
.contact-page .contact-eyebrow {
  color: #CBA96B !important;
  letter-spacing: 2px;
  font-weight: 700;
}

/* main title */
.contact-page .contact-hero h1 {
  color: #28395D !important;
  font-weight: 800;
}

/* description */
.contact-page .contact-description {
  color: #4B5563 !important;
}

/* contact card */
.contact-page .contact-card {
  border: 1.5px solid rgba(203, 169, 107, 0.35) !important;
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(40, 57, 93, 0.10) !important;
}

/* section titles */
.contact-page .contact-item h3 {
  color: #28395D !important;
  font-weight: 700;
}

/* body text */
.contact-page .contact-item p {
  color: #111111 !important;
}

/* social icons */
.contact-page .contact-socials a {
  border: 1px solid rgba(203, 169, 107, 0.45) !important;
  background: rgba(255,255,255,0.72) !important;
  color: #28395D !important;

  box-shadow:
    0 10px 24px rgba(40, 57, 93, 0.10);
}

/* hover */
.contact-page .contact-socials a:hover {
  background: #28395D !important;
  color: #F3F3EF !important;
  border-color: #CBA96B !important;
}

/* contact button */
.contact-page .footer-btn {
  background: #28395D !important;
  color: #F3F3EF !important;
  border: 1px solid #CBA96B !important;
}

.contact-page .footer-btn:hover {
  background: #000000 !important;
  color: #F3F3EF !important;
}

/* footer headings */
.contact-page .footer h5 {
  color: #CBA96B !important;
}

/* footer text */
.contact-page .footer p,
.contact-page .footer h4 {
  color: #28395D !important;
}

/* ==============================
   FINAL FIX: Timewise User Persona + Footer Icons
   Paste this at the VERY BOTTOM of css/style.css
   ============================== */

.tw-persona-section {
  background: #ffffff;
  padding: 80px 0;
}

.timewise-persona {
  width: min(1180px, calc(100% - 32px));
  min-height: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 365px 1fr;
  gap: 18px;
  background: #ffffff;
  color: #111111;
  font-family: Arial, Helvetica, sans-serif;
}

.persona-left {
  display: flex;
  flex-direction: column;
}

.persona-photo-wrap {
  position: relative;
  width: 100%;
  height: 432px;
  overflow: hidden;
  background: #d9d9d9;
}

.persona-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.persona-name-overlay {
  position: absolute;
  right: 0;
  bottom: 44px;
  width: 48%;
  color: #ffffff;
  text-align: left;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}

.persona-name-overlay h2 {
  margin: 0;
  font-size: 35px;
  line-height: 0.95;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.persona-name-overlay p {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.persona-main-quote {
  position: relative;
  margin: 18px 46px 0;
  color: #111111;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  border: 0;
}

.persona-main-quote::before {
  content: "”";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  color: #10283f;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  opacity: 0.95;
}

.persona-bio-row {
  margin-top: auto;
  padding: 46px 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: #607b6b;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.persona-right {
  display: grid;
  grid-template-rows: 230px 1fr;
  gap: 14px;
}

.persona-story-box {
  background: #667e71;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 48px;
  text-align: center;
}

.persona-story-box p {
  max-width: 570px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.42;
}

.persona-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  padding: 0 36px 0 0;
}

.persona-column h3 {
  margin: 0 0 28px;
  color: #12243a;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.persona-column ul {
  margin: 0;
  padding-left: 82px;
}

.persona-column li {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.38;
}

.pain-column ul {
  padding-left: 68px;
}

.pain-column li {
  margin-bottom: 26px;
}

.pain-column strong {
  display: block;
  font-weight: 400;
  margin-bottom: 1px;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.socials a:hover {
  transform: translateY(-2px);
  background: #ffffff;
  color: #10283f;
}

.socials i,
.socials .fa-brands,
.socials .fa-solid {
  font-size: 18px;
  line-height: 1;
  display: block;
}

.socials .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

.socials .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  .timewise-persona {
    grid-template-columns: 1fr;
  }

  .persona-right {
    grid-template-rows: auto auto;
  }

  .persona-content-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-right: 0;
  }

  .persona-column ul,
  .pain-column ul {
    padding-left: 24px;
  }
}

.persona-section-title {
  max-width: 1180px;
  margin: 0 auto 32px;
  color: #10253b;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
}

/* =========================================================
   FINAL TIMEWISE USER PERSONA FIX
========================================================= */

.tw-persona-card {
  width: min(1500px, 100%) !important;
  padding: 70px 40px 50px !important;
  background: #f5f5f5 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.tw-persona-card h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 64px !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  color: #005b12 !important;
  font-weight: 700 !important;
  margin-bottom: 34px !important;
  text-align: center !important;
}

.tw-persona-grid {
  display: grid !important;
  grid-template-columns: 390px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.tw-persona-left {
  display: flex !important;
  flex-direction: column !important;
}

.tw-persona-img {
  width: 390px !important;
  height: 480px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #d9d9d9 !important;
}

.tw-persona-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tw-persona-overlay {
  position: absolute !important;
  left: 42px !important;
  bottom: 26px !important;
  z-index: 3 !important;
}

.tw-persona-overlay h3 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
  font-size: 58px !important;
  line-height: 0.92 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  letter-spacing: -1px !important;
}

.tw-persona-overlay p {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.tw-persona-quote {
  position: relative !important;
  margin-top: 18px !important;
  text-align: center !important;
  padding: 0 42px !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #111111 !important;
}

.tw-persona-quote::before {
  content: "”" !important;
  position: absolute !important;
  top: -62px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 82px !important;
  color: #10253b !important;
  font-family: Georgia, serif !important;
}

.tw-persona-bio {
  margin-top: 72px !important;
  display: flex !important;
  justify-content: space-between !important;
  color: #607b6b !important;
  font-size: 16px !important;
}

.tw-persona-right {
  display: flex !important;
  flex-direction: column !important;
}

.tw-persona-story {
  width: 100% !important;
  min-height: 220px !important;
  background: #718576 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 90px !important;
}

.tw-persona-story p {
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.tw-persona-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 70px !important;
  padding-top: 28px !important;
}

.tw-persona-column h4 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
  font-size: 34px !important;
  line-height: 1 !important;
  color: #10253b !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
}

.tw-persona-column ul {
  padding-left: 28px !important;
}

.tw-persona-column li {
  margin-bottom: 26px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #111111 !important;
}

.tw-persona-column li strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-weight: 400 !important;
}

@media (max-width: 1100px) {

  .tw-persona-grid {
    grid-template-columns: 1fr !important;
  }

  .tw-persona-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  .tw-persona-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .tw-persona-story {
    padding: 40px !important;
  }
}

/* =========================================================
   TIMEWISE USER PERSONA FINAL OVERRIDE
========================================================= */

.tw-persona-section {
  background: #f5f5f5 !important;
  padding: 70px 0 80px !important;
}

.persona-section-title,
.tw-persona-card h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #005b12 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  text-align: center !important;
  margin: 0 auto 18px !important;
}

.timewise-persona {
  width: 730px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 276px 1fr !important;
  gap: 16px !important;
  background: #f5f5f5 !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.persona-left {
  width: 276px !important;
  display: flex !important;
  flex-direction: column !important;
}

.persona-photo-wrap {
  position: relative !important;
  width: 276px !important;
  height: 346px !important;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  border-radius: 0 !important;
}

/* remove wrong white paragraph inside image */
.persona-photo-wrap > p,
.persona-photo-wrap > blockquote,
.persona-photo-wrap .persona-image-quote,
.persona-photo-wrap .persona-extra-text,
.persona-photo-wrap .persona-main-quote {
  display: none !important;
}

.persona-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.persona-name-overlay {
  position: absolute !important;
  left: 48px !important;
  right: auto !important;
  bottom: 30px !important;
  width: auto !important;
  max-width: none !important;
  color: #ffffff !important;
  text-align: left !important;
  z-index: 5 !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45) !important;
}

.persona-name-overlay h2 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-size: 30px !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.persona-name-overlay p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  margin: 12px 0 0 !important;
}

.persona-main-quote {
  position: relative !important;
  display: block !important;
  margin: 14px auto 0 !important;
  padding: 0 34px !important;
  width: 100% !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
}

.persona-main-quote::before {
  content: "”" !important;
  position: absolute !important;
  top: -48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #10253b !important;
  font-family: Georgia, serif !important;
  font-size: 62px !important;
  line-height: 1 !important;
}

.persona-bio-row {
  width: 276px !important;
  margin-top: 36px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  text-align: left !important;
  gap: 0 !important;
  color: #607b6b !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.persona-bio-row span:nth-child(1) {
  text-align: left !important;
}

.persona-bio-row span:nth-child(2) {
  text-align: center !important;
}

.persona-bio-row span:nth-child(3) {
  text-align: right !important;
}

.persona-right {
  display: grid !important;
  grid-template-rows: 184px 1fr !important;
  gap: 14px !important;
}

.persona-story-box {
  width: 100% !important;
  height: 184px !important;
  background: #6b8073 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 42px !important;
}

.persona-story-box p {
  max-width: 390px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.persona-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 46px !important;
  padding: 0 !important;
}

.persona-column h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  color: #10253b !important;
  font-size: 24px !important;
  line-height: 1.12 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 0 24px !important;
}

.persona-column ul {
  margin: 0 !important;
  padding-left: 54px !important;
}

.pain-column ul {
  padding-left: 54px !important;
}

.persona-column li {
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 0 18px !important;
}

.pain-column li {
  margin-bottom: 22px !important;
}

.pain-column strong {
  display: block !important;
  font-weight: 400 !important;
  margin-bottom: 2px !important;
}

/* =========================================================
   PERSONA SIZE UP
========================================================= */

.timewise-persona {
  width: 940px !important;
  grid-template-columns: 360px 1fr !important;
  gap: 22px !important;
}

.persona-left {
  width: 360px !important;
}

.persona-photo-wrap {
  width: 360px !important;
  height: 450px !important;
}

.persona-name-overlay {
  left: 54px !important;
  bottom: 34px !important;
}

.persona-name-overlay h2 {
  font-size: 42px !important;
}

.persona-name-overlay p {
  font-size: 22px !important;
  margin-top: 14px !important;
}

.persona-main-quote {
  font-size: 18px !important;
  line-height: 1.55 !important;
  margin-top: 18px !important;
  padding: 0 40px !important;
}

.persona-main-quote::before {
  font-size: 74px !important;
  top: -56px !important;
}

.persona-bio-row {
  width: 360px !important;
  margin-top: 48px !important;
  font-size: 18px !important;
}

.persona-right {
  grid-template-rows: 230px 1fr !important;
}

.persona-story-box {
  height: 230px !important;
  padding: 0 54px !important;
}

.persona-story-box p {
  max-width: 520px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.persona-content-grid {
  gap: 58px !important;
  padding-top: 18px !important;
}

.persona-column h3 {
  font-size: 34px !important;
  margin-bottom: 28px !important;
}

.persona-column ul,
.pain-column ul {
  padding-left: 38px !important;
}

.persona-column li {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

/* =========================================================
   PERSONA BIGGER VERSION
========================================================= */

.timewise-persona {
  width: 1180px !important;
  grid-template-columns: 430px 1fr !important;
  gap: 28px !important;
}

.persona-left {
  width: 430px !important;
}

.persona-photo-wrap {
  width: 430px !important;
  height: 540px !important;
}

.persona-photo {
  object-fit: cover !important;
  object-position: center top !important;
}

.persona-name-overlay {
  left: 58px !important;
  bottom: 38px !important;
}

.persona-name-overlay h2 {
  font-size: 54px !important;
  line-height: 0.9 !important;
}

.persona-name-overlay p {
  font-size: 28px !important;
  margin-top: 16px !important;
}

.persona-main-quote {
  margin-top: 22px !important;
  padding: 0 42px !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
}

.persona-main-quote::before {
  font-size: 86px !important;
  top: -66px !important;
}

.persona-bio-row {
  width: 430px !important;
  margin-top: 56px !important;
  font-size: 22px !important;
}

.persona-right {
  grid-template-rows: 270px 1fr !important;
  gap: 24px !important;
}

.persona-story-box {
  height: 270px !important;
  padding: 0 72px !important;
}

.persona-story-box p {
  max-width: 640px !important;
  font-size: 24px !important;
  line-height: 1.65 !important;
}

.persona-content-grid {
  gap: 72px !important;
  padding-top: 12px !important;
}

.persona-column h3 {
  font-size: 46px !important;
  line-height: 1 !important;
  margin-bottom: 34px !important;
}

.persona-column ul,
.pain-column ul {
  padding-left: 44px !important;
}

.persona-column li {
  font-size: 19px !important;
  line-height: 1.8 !important;
  margin-bottom: 28px !important;
}

.pain-column strong {
  margin-bottom: 6px !important;
}

/* =========================================================
   POLYTRIP PROGRESS FINAL
========================================================= */

.progress-card {
  border-radius: 42px !important;
  padding: 88px 70px 78px !important;
  background: #f5f5f5 !important;
  box-shadow: none !important;
}

.pt-process-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 90px !important;
  align-items: start !important;
}

.pt-process-item {
  text-align: center !important;
}

.pt-process-item h3 {
  font-size: 28px !important;
  line-height: 1 !important;
  color: #5066d8 !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.pt-icon {
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto 28px !important;
  border-radius: 50% !important;
  border: 2px solid #9bc7f3 !important;
  background: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
}

.pt-icon::before {
  content: "" !important;

  width: 86px !important;
  height: 86px !important;

  border-radius: 50% !important;
  background: #4f95d9 !important;

  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
}

.pt-icon i {
  position: relative !important;
  z-index: 2 !important;

  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

/* fix weird fontawesome alignment */
.pt-icon .fa-route,
.pt-icon .fa-map-location-dot,
.pt-icon .fa-location-arrow {
  transform: translateY(1px) !important;
}

.pt-process-item p {
  max-width: 320px !important;
  margin: 0 auto !important;

  color: #2f3e55 !important;

  font-size: 22px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;

  font-family: Arial, Helvetica, sans-serif !important;
}

@media (max-width: 1100px) {

  .pt-process-grid {
    grid-template-columns: 1fr !important;
    gap: 70px !important;
  }

  .progress-card {
    padding: 70px 40px !important;
  }
}

/* =========================================================
   POLYTRIP FINAL OVERRIDES
========================================================= */

.progress-card {
  border-radius: 42px !important;
  padding: 88px 70px 78px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.pt-process-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 90px !important;
  align-items: start !important;
}

.pt-process-item {
  text-align: center !important;
}

.pt-process-item h3 {
  font-size: 28px !important;
  line-height: 1 !important;
  color: #5066d8 !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.pt-icon {
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto 28px !important;
  border-radius: 50% !important;
  border: 2px solid #9bc7f3 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.pt-icon::before {
  content: "" !important;
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  background: #4f95d9 !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
}

.pt-icon i {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

.pt-process-item p {
  max-width: 320px !important;
  margin: 0 auto !important;
  color: #2f3e55 !important;
  font-size: 22px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.solution-card {
  border-radius: 38px !important;
  padding: 78px !important;
  background: #ffffff !important;
}

.pt-solution-img {
  width: 100% !important;
  max-width: 1130px !important;
  aspect-ratio: 16 / 8.4 !important;
  margin: 0 auto 48px !important;
  border-radius: 22px !important;
  background: #f3f3f3 !important;
  overflow: hidden !important;
}

.pt-solution-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.pt-center-text {
  max-width: 880px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.7 !important;
  color: #26364d !important;
  font-weight: 400 !important;
}

.pt-center-link {
  display: block !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0d4f8b !important;
  text-decoration: underline !important;
}

/* =========================================================
   POLYTRIP PERSONA FINAL FIX
========================================================= */

.pt-persona-card {
  width: 1150px !important;
  margin: 0 auto !important;
  background: #f5f5f5 !important;
  padding: 40px 40px 34px !important;
}

.pt-persona-card h2 {
  display: none !important;
}

.pt-persona-grid {
  display: grid !important;
  grid-template-columns: 375px 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

.pt-persona-left {
  width: 375px !important;
  background: #9eb0c7 !important;
  padding: 48px 38px 38px !important;
  min-height: 618px !important;
}

.pt-persona-photo-wrap {
  position: relative !important;
  width: 100% !important;
}

.pt-persona-photo {
  width: 220px !important;
  height: 320px !important;
  margin: 0 auto 28px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
  border: 12px solid rgba(255,255,255,0.7) !important;
  display: block !important;
}

.pt-persona-name {
  text-align: center !important;
}

.pt-persona-name h3 {
  font-size: 34px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.pt-persona-name p {
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}

.pt-persona-quote {
  max-width: 280px !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.pt-persona-right {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 70px !important;
  row-gap: 26px !important;
  align-items: start !important;
}

.pt-persona-block {
  background: transparent !important;
}

.pt-persona-block h3 {
  color: #103f8b !important;
  font-size: 28px !important;
  line-height: 1 !important;
  margin-bottom: 18px !important;
  font-weight: 800 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.pt-background {
  grid-column: 1 / span 2 !important;
}

.pt-background p {
  max-width: 640px !important;
}

.pt-persona-block p,
.pt-persona-block li {
  color: #222222 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.pt-persona-block ul {
  padding-left: 22px !important;
}

.pt-persona-block li {
  margin-bottom: 14px !important;
}

.pt-skills {
  padding-top: 2px !important;
}

.skill-row {
  margin-bottom: 20px !important;
}

.skill-row p {
  margin-bottom: 8px !important;
  color: #103f8b !important;
  font-size: 18px !important;
}

.skill-dots {
  display: flex !important;
  gap: 10px !important;
}

.skill-dots span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #95a1ad !important;
  display: block !important;
}

.skill-dots span.active {
  background: #103f8b !important;
}

.pt-persona-title {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* =========================================================
   POLYTRIP PERSONA FINAL
========================================================= */

.pt-section .pt-persona-title {
  width: 1420px !important;
  margin: 0 auto 36px !important;
  text-align: center !important;

  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 76px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -3px !important;

  color: #103f8b !important;
}

.pt-persona-card {
  width: 1420px !important;
  margin: 0 auto !important;
  background: #f5f5f5 !important;
  padding: 54px 54px 46px !important;
  border-radius: 30px !important;
}

.pt-persona-grid {
  display: grid !important;
  grid-template-columns: 470px 1fr !important;
  gap: 64px !important;
  align-items: start !important;
}

.pt-persona-left {
  width: 470px !important;
  background: #9eb0c7 !important;
  padding: 60px 46px 46px !important;
  min-height: 760px !important;
}

.pt-persona-photo {
  width: 300px !important;
  height: 410px !important;
  margin: 0 auto 38px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
  border: 14px solid rgba(255,255,255,0.72) !important;
  display: block !important;
}

.pt-persona-name {
  text-align: center !important;
}

.pt-persona-name h3 {
  font-size: 56px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.pt-persona-name p {
  font-size: 30px !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 28px !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.pt-persona-quote {
  max-width: 360px !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.pt-persona-right {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 92px !important;
  row-gap: 38px !important;
  align-items: start !important;
}

.pt-background {
  grid-column: 1 / span 2 !important;
}

.pt-background p {
  max-width: 860px !important;
}

.pt-persona-block h3 {
  color: #103f8b !important;
  font-size: 46px !important;
  line-height: 1 !important;
  margin-bottom: 26px !important;
  font-weight: 800 !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.pt-persona-block p,
.pt-persona-block li {
  color: #222222 !important;
  font-size: 23px !important;
  line-height: 1.85 !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.pt-persona-block ul {
  padding-left: 34px !important;
}

.pt-persona-block li {
  margin-bottom: 18px !important;
}

.skill-row {
  margin-bottom: 34px !important;
}

.skill-row p {
  margin-bottom: 14px !important;
  color: #103f8b !important;
  font-size: 28px !important;
  font-family: 'Noto Sans KR', sans-serif !important;
}

.skill-dots {
  display: flex !important;
  gap: 14px !important;
}

.skill-dots span {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #95a1ad !important;
  display: block !important;
}

.skill-dots span.active {
  background: #103f8b !important;
}

/* =========================================================
   POLYTRIP PERSONA EXACT FINAL
========================================================= */

.pt-persona-title {
  width: 1150px !important;
  margin: 0 auto 34px !important;

  text-align: center !important;

  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 68px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;

  color: #103f8b !important;
}

.pt-persona-card {
  width: 1150px !important;
  margin: 0 auto !important;

  background: #f3f3f3 !important;

  border-radius: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  box-shadow: none !important;
}

.pt-persona-grid {
  display: grid !important;
  grid-template-columns: 375px 1fr !important;
  gap: 48px !important;

  align-items: start !important;
}

.pt-persona-left {
  background: #a5b5cb !important;

  width: 375px !important;
  min-height: 618px !important;

  padding: 38px 34px 34px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.pt-persona-photo-wrap {
  width: 100% !important;
}

.pt-persona-photo {
  width: 210px !important;
  height: 310px !important;

  object-fit: cover !important;

  border-radius: 999px !important;

  border: 12px solid rgba(255,255,255,0.68) !important;

  display: block !important;

  margin: 0 auto 26px !important;
}

.pt-persona-name {
  text-align: center !important;
}

.pt-persona-name h3 {
  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 33px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  color: #ffffff !important;

  margin: 0 0 12px !important;
}

.pt-persona-name p {
  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;

  color: #ffffff !important;

  margin: 0 0 18px !important;
}

.pt-persona-quote {
  max-width: 255px !important;

  margin: 0 auto !important;

  text-align: center !important;

  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;

  color: rgba(255,255,255,0.95) !important;
}

.pt-persona-right {
  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  column-gap: 56px !important;
  row-gap: 24px !important;

  padding: 26px 34px 20px 0 !important;
}

.pt-background {
  grid-column: 1 / span 2 !important;
}

.pt-persona-block {
  background: transparent !important;

  padding: 0 !important;

  margin: 0 !important;
}

.pt-persona-block h3 {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #103f8b !important;

  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;

  margin: 0 0 16px !important;
}

.pt-persona-block p {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #222222 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;

  margin: 0 !important;
}

.pt-persona-block ul {
  padding-left: 22px !important;
  margin: 0 !important;
}

.pt-persona-block li {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #222222 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;

  margin-bottom: 10px !important;
}

.pt-skills {
  padding-top: 2px !important;
}

.skill-row {
  margin-bottom: 18px !important;
}

.skill-row p {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #103f8b !important;

  font-size: 16px !important;
  line-height: 1 !important;

  margin-bottom: 10px !important;
}

.skill-dots {
  display: flex !important;
  gap: 10px !important;
}

.skill-dots span {
  width: 20px !important;
  height: 20px !important;

  border-radius: 50% !important;

  background: #9aa5b2 !important;

  display: block !important;
}

.skill-dots span.active {
  background: #103f8b !important;
}

/* =========================================================
   GLOBAL FONT OVERRIDE
========================================================= */

body,
.pt-section,
.pt-section *,
.pt-hero,
.pt-hero *,
.pt-persona-card,
.pt-persona-card *,
.pt-card,
.pt-card *,
.pt-reveal-card,
.pt-reveal-card * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* =========================================================
   GLOBAL FONT OVERRIDE
========================================================= */

html,
body,
button,
input,
textarea,
select,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* =========================================================
   GLOBAL FONT OVERRIDE
========================================================= */

html,
body,
button,
input,
textarea,
select,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div {
  font-family: 'Noto Sans KR', sans-serif !important;
}

@import url('https://fonts.cdnfonts.com/css/garet');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');

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

html {
  scroll-behavior: smooth;
}

/* =========================================================
   GLOBAL FONT FINAL
========================================================= */

html,
body,
button,
input,
textarea,
select,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div {
  font-family: 'Garet', 'Noto Sans KR', sans-serif !important;
}

body {
  font-family: 'Garet', 'Noto Sans KR', sans-serif !important;
  color: #111111;
  background: #ffffff;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   POLYTRIP PERSONA EXACT FINAL
========================================================= */

.pt-persona-title {
  width: 1150px !important;
  margin: 0 auto 34px !important;

  text-align: center !important;

  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 68px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;

  color: #103f8b !important;
}

.pt-persona-card {
  width: 1150px !important;
  margin: 0 auto !important;

  background: #f3f3f3 !important;

  border-radius: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  box-shadow: none !important;
}

.pt-persona-grid {
  display: grid !important;
  grid-template-columns: 375px 1fr !important;
  gap: 48px !important;

  align-items: start !important;
}

.pt-persona-left {
  background: #a5b5cb !important;

  width: 375px !important;
  min-height: 618px !important;

  padding: 38px 34px 34px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.pt-persona-photo-wrap {
  width: 100% !important;
}

.pt-persona-photo {
  width: 210px !important;
  height: 310px !important;

  object-fit: cover !important;

  border-radius: 999px !important;

  border: 12px solid rgba(255,255,255,0.68) !important;

  display: block !important;

  margin: 0 auto 26px !important;
}

.pt-persona-name {
  text-align: center !important;
}

.pt-persona-name h3 {
  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 33px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  color: #ffffff !important;

  margin: 0 0 12px !important;
}

.pt-persona-name p {
  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;

  color: #ffffff !important;

  margin: 0 0 18px !important;
}

.pt-persona-quote {
  max-width: 255px !important;

  margin: 0 auto !important;

  text-align: center !important;

  font-family: 'Noto Sans KR', sans-serif !important;

  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;

  color: rgba(255,255,255,0.95) !important;
}

.pt-persona-right {
  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  column-gap: 56px !important;
  row-gap: 24px !important;

  padding: 26px 34px 20px 0 !important;
}

.pt-background {
  grid-column: 1 / span 2 !important;
}

.pt-persona-block {
  background: transparent !important;

  padding: 0 !important;

  margin: 0 !important;
}

.pt-persona-block h3 {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #103f8b !important;

  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;

  margin: 0 0 16px !important;
}

.pt-persona-block p {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #222222 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;

  margin: 0 !important;
}

.pt-persona-block ul {
  padding-left: 22px !important;
  margin: 0 !important;
}

.pt-persona-block li {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #222222 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;

  margin-bottom: 10px !important;
}

.pt-skills {
  padding-top: 2px !important;
}

.skill-row {
  margin-bottom: 18px !important;
}

.skill-row p {
  font-family: 'Noto Sans KR', sans-serif !important;

  color: #103f8b !important;

  font-size: 16px !important;
  line-height: 1 !important;

  margin-bottom: 10px !important;
}

.skill-dots {
  display: flex !important;
  gap: 10px !important;
}

.skill-dots span {
  width: 20px !important;
  height: 20px !important;

  border-radius: 50% !important;

  background: #9aa5b2 !important;

  display: block !important;
}

.skill-dots span.active {
  background: #103f8b !important;
}

/* =========================================================
   FONT AWESOME FIX
========================================================= */

.fa-solid,
.fa-regular,
.fa-brands,
.fas,
.far,
.fab {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* =========================================================
   FONT AWESOME FIX
========================================================= */

.tw-section i,
.tw-hero i,
.pt-section i,
.pt-hero i,
.ss-section i,
.ss-hero i,
.footer i,
.socials i,
.contact-socials i {
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.tw-section .fa-solid,
.tw-hero .fa-solid,
.pt-section .fa-solid,
.pt-hero .fa-solid,
.ss-section .fa-solid,
.ss-hero .fa-solid,
.footer .fa-solid,
.socials .fa-solid,
.contact-socials .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.tw-section .fa-brands,
.tw-hero .fa-brands,
.pt-section .fa-brands,
.pt-hero .fa-brands,
.ss-section .fa-brands,
.ss-hero .fa-brands,
.footer .fa-brands,
.socials .fa-brands,
.contact-socials .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* =========================================================
   SKILLSWAP PERSONA FINAL
========================================================= */

.ss-persona-section {
  background: #ffffff !important;
  padding: 90px 0 !important;
}

.skillswap-persona {
  width: 1245px !important;
  margin: 0 auto !important;
  background: #f7f4fb !important;
  border-radius: 18px !important;
  padding: 10px 12px 18px !important;
  overflow: hidden !important;
  font-family: 'Inter', sans-serif !important;
}

.ss-persona-main-name {
  font-size: 58px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #8340f5 !important;
  margin: 0 0 48px !important;
  letter-spacing: -2px !important;
}

.ss-persona-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 58px !important;
}

.ss-persona-col {
  min-width: 0 !important;
}

.ss-purple-header {
  height: 44px !important;
  border-radius: 7px !important;
  background: #8238f3 !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  margin-bottom: 16px !important;
}

.ss-persona-col:nth-child(3) .ss-purple-header {
  justify-content: center !important;
}

.skillswap-persona ul {
  padding-left: 16px !important;
  margin: 0 0 18px !important;
}

.skillswap-persona li {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: #111111 !important;
  margin-bottom: 4px !important;
}

.ss-emily-photo {
  width: 355px !important;
  height: 302px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 4px !important;
  margin-top: 14px !important;
}

.biodata-header {
  margin-top: 50px !important;
}

.pain-header {
  margin-top: 34px !important;
}

.ss-biodata {
  margin-top: 12px !important;
}

.ss-biodata p {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  font-size: 16px !important;
  color: #111111 !important;
}

.ss-biodata strong {
  font-weight: 800 !important;
}

.ss-biodata span {
  font-weight: 400 !important;
}

.ss-persona-bottom-quote {
  width: 100% !important;
  margin: 36px auto 0 !important;
  text-align: center !important;
  color: #8340f5 !important;
  font-size: 28px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}
/* =========================================================
   SKILLSWAP TASK FLOW + DESIGN PROCESS FONT FIX
========================================================= */

.ss-task-card-large h2,
.ss-task-card-large h3,
.ss-task-card-large p,
.ss-task-card-large a,
.ss-task-single h3,
.ss-task-single p,
.ss-prototype-row p,
.ss-prototype-row a,
.ss-card .ss-center {
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
}

.ss-prototype-row a {
  color: #7b3ff2 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.ss-prototype-row a:hover {
  opacity: 0.8 !important;
}

.ss-arrow {
  color: #7b3ff2 !important;
  font-size: 42px !important;
  font-weight: 700 !important;
}

/* =========================================================
   SKILLSWAP TASK FLOW + DESIGN PROCESS FINAL FIX
========================================================= */

.ss-task-card-large,
.ss-task-card-large *,
.ss-task-single,
.ss-task-single *,
.ss-prototype-row,
.ss-prototype-row *,
.ss-card .ss-center {
  font-family: 'Inter', sans-serif !important;
}

.ss-task-card-large h2,
.ss-task-card-large .ss-center,
.ss-task-single h3,
.ss-task-single p,
.ss-prototype-row p {
  color: #1d1233 !important;
}

.ss-task-single h3 {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}

.ss-task-single p {
  font-size: 18px !important;
  line-height: 1.85 !important;
}

.ss-prototype-row a,
.ss-center-link {
  color: #7a46de !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.ss-prototype-row p {
  color: #1d1233 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.ss-arrow {
  color: #7a46de !important;
  font-size: 42px !important;
  font-weight: 800 !important;
}

/* =========================================================
   SKILLSWAP TASK FLOW + DESIGN PROCESS FINAL
========================================================= */

.ss-task-card-large h2,
.ss-task-card-large h3,
.ss-task-card-large p,
.ss-task-single h3,
.ss-task-single p,
.ss-prototype-row p,
.ss-prototype-row a,
.ss-prototype-row span,
.ss-card .ss-center {
  font-family: 'Inter', sans-serif !important;
}

.ss-task-card-large h2,
.ss-card .ss-center {
  color: #7a46de !important;
}

.ss-task-card-large h3,
.ss-task-single h3 {
  color: #1d1233 !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 32px 0 18px !important;
  text-align: center !important;
}

.ss-task-card-large p,
.ss-task-single p {
  color: #2d2440 !important;
  font-size: 19px !important;
  line-height: 1.85 !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.ss-prototype-row p {
  color: #1d1233 !important;
}

.ss-prototype-row a {
  color: #7a46de !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

.ss-arrow {
  color: #7a46de !important;
}

/* =========================================================
   CASE STUDY STEP NUMBER COLOR FIX
========================================================= */

.tw-step span,
.pt-step span,
.ss-step span {
  color: #ffffff !important;
}

/* ===== FOOTER FIX ===== */

.footer,
.site-footer {
  background: #14323e;
  color: #ffffff;
  padding: 72px 8%;
}

.footer-container,
.footer-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer h2,
.footer-title {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 28px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer-contact p,
.footer-contact a {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
}

.footer-contact strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #ffffff;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.footer-nav a:hover {
  opacity: 0.7;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  width: fit-content;
}

@media (max-width: 768px) {
  .footer-container,
  .footer-content {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: left;
  }

  .footer-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ===== SKILLSWAP / GLOBAL FOOTER FINAL FIX ===== */

.footer {
  width: 100%;
  background: #14323e !important;
  color: #ffffff !important;
  padding: 72px 6% !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  align-items: center !important;
  gap: 80px !important;
}

.footer-left h4 {
  font-size: 34px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 26px !important;
}

.footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.footer-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 34px !important;
}

.footer-info h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.footer-info p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
}

.footer-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.footer-right a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.footer-right a:hover {
  opacity: 0.7 !important;
}

@media (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 56px 7% !important;
  }

  .footer-right {
    justify-content: flex-start !important;
  }
}

/* =========================================================
   FINAL FOOTER OVERRIDE — USE THIS LAST
========================================================= */

.footer {
  width: 100% !important;
  min-height: 280px !important;
  padding: 70px 6% !important;
  background:
    radial-gradient(circle at right top, rgba(255,255,255,0.08), transparent 35%),
    linear-gradient(135deg, #102631 0%, #1c3340 48%, #243847 100%) !important;
  color: #ffffff !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1.1fr 0.75fr !important;
  align-items: center !important;
  gap: 60px !important;
}

.footer-left h4 {
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 26px !important;
}

.footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 26px !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.footer-btn:hover {
  background: #ffffff !important;
  color: #102631 !important;
}

.footer-info {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 70px !important;
}

.footer-info h5 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
}

.footer-info p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #e5e5e5 !important;
}

.socials,
.footer-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

.socials a,
.footer-right a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.socials i {
  font-size: 22px !important;
  color: #ffffff !important;
}

.socials a:hover,
.footer-right a:hover {
  opacity: 0.7 !important;
}

.copyright {
  width: 100% !important;
  padding: 22px 6% !important;
  background: #0f222b !important;
  color: rgba(255,255,255,0.72) !important;
  text-align: center !important;
  font-size: 14px !important;
}

@media (max-width: 900px) {
  .footer {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
    padding: 56px 7% !important;
  }

  .footer-info {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .socials,
  .footer-right {
    justify-content: flex-start !important;
  }

  .footer-left h4 {
    font-size: 32px !important;
  }
}