/* ============================================================
   POOJA CHOUDHARY DESIGN — Stylesheet
   ============================================================ */

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Using `clip` instead of `hidden` so it doesn't establish a
     containing block that would break `position: sticky` on
     descendants (e.g. the Latest Work card stack). */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

/* --- Design Tokens --- */
:root {
  /* Colors — "Warm Studio" palette */
  --color-cream: #F5F0EB;
  --color-cream-dark: #EDE5DC;
  --color-white: #FFFFFF;
  --color-charcoal: #2D2D2D;
  --color-warm-gray: #78716C;
  --color-warm-gray-light: #A8A29E;
  --color-terracotta: #C27A4F;
  --color-terracotta-light: #D4956E;
  --color-terracotta-dark: #A8623A;
  --color-sage: #8B9D83;
  --color-sage-light: #A8B8A0;
  --color-blush: #D4A89A;

  /* Typography */
  --font-display: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-padding: 7rem;
  --section-padding-sm: 5rem;
  --container-max: 1200px;
  --container-padding: 1rem;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-charcoal);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
  color: var(--color-warm-gray);
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.section-subtitle {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-terracotta);
  margin-bottom: 0.75rem;
}

.section-title {
  margin-bottom: 1.5rem;
}

.section-description {
  max-width: 600px;
  margin-bottom: 3rem;
}

.text-center { text-align: center; }
.text-center .section-description { margin-left: auto; margin-right: auto; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--section-padding) 0;
}

.section--cream {
  background-color: var(--color-cream);
}

.section--white {
  background-color: var(--color-white);
}

.section--dark {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-cream);
}

.section--dark p {
  color: var(--color-warm-gray-light);
}

.grid {
  display: grid;
  gap: 2rem;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-terracotta-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(194, 122, 79, 0.3);
}

.btn--outline {
  border: 1.5px solid var(--color-charcoal);
  color: var(--color-charcoal);
}

.btn--outline:hover {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.btn--white {
  background-color: var(--color-white);
  color: var(--color-charcoal);
}

.btn--white:hover {
  background-color: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.btn--sm {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.btn svg {
  width: 1em;
  height: 1em;
}

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: all var(--transition-fast);
}

.navbar--scrolled {
  background-color: rgba(245, 240, 235, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.75rem 0;
  box-shadow: 0 1px 20px rgba(0,0,0,0.05);
}

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

.navbar__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-charcoal);
  letter-spacing: -0.02em;
}

.navbar__logo span {
  color: var(--color-terracotta);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__link {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-warm-gray);
  transition: color var(--transition-fast);
  position: relative;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--color-terracotta);
  transition: width var(--transition-fast);
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--color-charcoal);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  width: 100%;
}

.navbar__cta {
  margin-left: 1rem;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-charcoal);
  transition: all var(--transition-fast);
  border-radius: 2px;
}

.navbar__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-cream);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.mobile-menu--open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-charcoal);
  transition: color var(--transition-fast);
}

.mobile-menu a:hover {
  color: var(--color-terracotta);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--home {
  justify-content: center;
  text-align: center;
  background-color: var(--color-cream);
  padding: 0 var(--container-padding);
}

.hero__inner {
  max-width: 1000px;
  width: 100%;
  will-change: opacity, transform;
}

.hero__role {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.hero__role-text {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-terracotta);
}

.hero__role-line {
  width: 3rem;
  height: 1px;
  background-color: var(--color-terracotta);
  opacity: 0.4;
}

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 8rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--color-charcoal);
  margin-bottom: 2rem;
  font-weight: 400;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  color: var(--color-warm-gray);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 3rem;
}

.hero__cta {
  margin-bottom: 4rem;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.hero__scroll-text {
  font-family: var(--font-accent);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-warm-gray-light);
}

.hero__scroll-line {
  width: 1px;
  height: 2.5rem;
  background-color: var(--color-warm-gray-light);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* Legacy hero classes (used on inner pages) */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero__badge {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}

.hero__title {
  margin-bottom: 1.5rem;
}

.hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-warm-gray);
  margin-bottom: 2.5rem;
  max-width: 500px;
  line-height: 1.8;
}

/* Page Hero (inner pages) */
.hero--page {
  min-height: 40vh;
  background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 100%);
  text-align: center;
}

.hero--page .hero__content {
  max-width: 600px;
  margin: 0 auto;
}

.hero--page .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* --- Portfolio Grid --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.portfolio-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.portfolio-card:hover {
  transform: translateY(-4px);
}

.portfolio-card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.03);
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(45,45,45,0.85) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
}

.portfolio-card__category {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-terracotta-light);
  margin-bottom: 0.5rem;
}

.portfolio-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-white);
}

/* --- Featured Gallery (Homepage) --- */
.featured-work__header {
  margin-bottom: 3.5rem;
}

.featured-work__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.featured-gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
}

.featured-gallery__item--large {
  grid-row: 1 / 3;
}

.featured-gallery__item {
  display: block;
  position: relative;
}

.featured-gallery__image-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.featured-gallery__image-wrap img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.8s var(--ease-out-expo);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}

.featured-gallery__image-wrap img.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.featured-gallery__item--large .featured-gallery__image-wrap img {
  aspect-ratio: 3/4;
}

.featured-gallery__item:hover .featured-gallery__image-wrap img {
  transform: scale(1.04);
}

.featured-gallery__info {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0 0;
}

.featured-gallery__category {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.featured-gallery__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-charcoal);
  flex: 1;
}

.featured-gallery__arrow {
  font-size: 1.25rem;
  color: var(--color-warm-gray-light);
  transition: all var(--transition-fast);
}

.featured-gallery__item:hover .featured-gallery__arrow {
  color: var(--color-terracotta);
  transform: translateX(4px);
}

/* --- Discipline Marquee --- */
.marquee-section {
  padding: 3rem 0;
  overflow: hidden;
  border-top: 1px solid var(--color-cream-dark);
  border-bottom: 1px solid var(--color-cream-dark);
  background-color: var(--color-cream);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marqueeScroll 20s linear infinite;
  width: max-content;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-charcoal);
  letter-spacing: -0.02em;
  font-style: italic;
}

.marquee__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  flex-shrink: 0;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-play-state: paused;
  }
  .hero__scroll-line {
    animation: none;
  }
}

/* Placeholder images */
.placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-white);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.placeholder-img--brand {
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
}

.placeholder-img--uiux {
  background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-sage-light) 100%);
}

.placeholder-img--graphic {
  background: linear-gradient(135deg, var(--color-blush) 0%, #C9918A 100%);
}

.placeholder-img--interior {
  background: linear-gradient(135deg, var(--color-warm-gray) 0%, var(--color-warm-gray-light) 100%);
}

/* Filter Buttons */
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-accent);
  padding: 0.625rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-warm-gray-light);
  color: var(--color-warm-gray);
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.filter-btn--active {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
}

/* --- Service Cards --- */
.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  border-color: var(--color-cream-dark);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.service-card__icon--brand {
  background-color: rgba(194, 122, 79, 0.1);
  color: var(--color-terracotta);
}

.service-card__icon--graphic {
  background-color: rgba(212, 168, 154, 0.15);
  color: var(--color-blush);
}

.service-card__icon--uiux {
  background-color: rgba(139, 157, 131, 0.15);
  color: var(--color-sage);
}

.service-card__icon--interior {
  background-color: rgba(120, 113, 108, 0.1);
  color: var(--color-warm-gray);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}

.service-card__text {
  font-size: 0.9375rem;
  color: var(--color-warm-gray);
  line-height: 1.7;
}

.service-card__list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-card__list li {
  font-size: 0.875rem;
  color: var(--color-warm-gray);
  padding-left: 1.25rem;
  position: relative;
}

.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-terracotta-light);
}

/* Services Preview (home page) */
.service-preview {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.service-preview:hover {
  background-color: var(--color-white);
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

.service-preview__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.service-preview__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.service-preview__text {
  font-size: 0.875rem;
  color: var(--color-warm-gray);
}

/* --- Process Steps --- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: process-step;
}

.process__step {
  text-align: center;
  position: relative;
  counter-increment: process-step;
}

.process__step::before {
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-cream-dark);
  margin-bottom: 1rem;
}

.process__step h4 {
  margin-bottom: 0.5rem;
}

.process__step p {
  font-size: 0.875rem;
}

.process__connector {
  position: absolute;
  top: 2rem;
  right: -1rem;
  width: 2rem;
  height: 2px;
  background-color: var(--color-cream-dark);
}

/* --- Testimonials --- */
.testimonial-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: all var(--transition-fast);
}

.testimonial-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.testimonial-card__quote {
  font-size: 1.0625rem;
  color: var(--color-charcoal);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-card__quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-terracotta-light);
  line-height: 0;
  display: block;
  margin-bottom: 0.5rem;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-cream-dark);
}

.testimonial-card__name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-charcoal);
}

.testimonial-card__role {
  font-size: 0.8125rem;
  color: var(--color-warm-gray);
}

/* Featured testimonial */
.testimonial-featured {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 0;
}

.testimonial-featured__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-charcoal);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.testimonial-featured__quote::before {
  content: '\201C';
  font-size: 4rem;
  color: var(--color-terracotta-light);
  line-height: 0;
  display: block;
  margin-bottom: 1rem;
}

/* Home testimonial strip */
.testimonial-strip {
  background-color: var(--color-charcoal);
  padding: var(--section-padding) 0;
  text-align: center;
}

.testimonial-strip__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  color: var(--color-cream);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

.testimonial-strip__quote::before {
  content: '\201C';
  font-size: 3.5rem;
  color: var(--color-terracotta-light);
  line-height: 0;
  display: block;
  margin-bottom: 1rem;
}

.testimonial-strip__author {
  color: var(--color-warm-gray-light);
  font-size: 0.9375rem;
}

.testimonial-strip__author strong {
  color: var(--color-cream);
}

/* --- CTA Banner --- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 4rem 3rem;
  text-align: center;
  color: var(--color-white);
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: 1rem;
}

.cta-banner p {
  color: rgba(255,255,255,0.85);
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* --- Timeline --- */
.timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-cream-dark);
}

.timeline__item {
  position: relative;
  padding-bottom: 2.5rem;
  padding-left: 1.5rem;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  border: 3px solid var(--color-cream);
  margin-left: -5px;
}

.timeline__year {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-terracotta);
  margin-bottom: 0.25rem;
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.timeline__text {
  font-size: 0.875rem;
  color: var(--color-warm-gray);
}

/* --- Skills Grid --- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
}

.skill-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-white);
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-charcoal);
  transition: all var(--transition-fast);
}

.skill-tag:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.skill-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Values --- */
.value-card {
  text-align: center;
  padding: 2.5rem 2rem;
}

.value-card__icon {
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

.value-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.value-card__text {
  font-size: 0.9375rem;
  color: var(--color-warm-gray);
}

/* --- Contact Form --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-charcoal);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.875rem 1.25rem;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-cream-dark);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-terracotta);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2378716C' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  padding-right: 3rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Contact Info */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: rgba(194, 122, 79, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-terracotta);
}

.contact-info__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  margin-bottom: 0.25rem;
}

.contact-info__value {
  font-weight: 500;
  color: var(--color-charcoal);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--color-warm-gray);
}

.social-link:hover {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
}

/* --- Case Study --- */
.case-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  padding: 4rem 0;
  overflow: hidden;
}

.case-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  z-index: 0;
}

.case-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(45,45,45,0.9) 0%, rgba(45,45,45,0.3) 100%);
  z-index: 1;
}

.case-hero__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
}

.case-hero__category {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-terracotta-light);
  margin-bottom: 0.75rem;
}

.case-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-white);
  margin-bottom: 1rem;
}

.case-hero__meta {
  display: flex;
  gap: 2rem;
  font-size: 0.875rem;
  color: var(--color-warm-gray-light);
}

/* Case study body */
.case-section {
  padding: 4rem 0;
}

.case-section + .case-section {
  border-top: 1px solid var(--color-cream-dark);
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.case-grid h3 {
  margin-bottom: 1rem;
}

/* Color palette display */
.color-palette {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.color-swatch {
  text-align: center;
}

.color-swatch__block {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.color-swatch__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-warm-gray);
}

/* Typography showcase */
.type-sample {
  margin-bottom: 1.5rem;
}

.type-sample__name {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  margin-bottom: 0.5rem;
}

.type-sample__preview {
  font-size: 2rem;
  color: var(--color-charcoal);
}

/* Case study gallery */
.case-gallery {
  display: grid;
  gap: 2rem;
}

.case-gallery--2col {
  grid-template-columns: 1fr 1fr;
}

.case-gallery img,
.case-gallery .placeholder-img {
  border-radius: var(--radius-md);
  aspect-ratio: 16/10;
}

/* Prev/Next navigation */
.case-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 3rem 0;
  border-top: 1px solid var(--color-cream-dark);
}

.case-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.case-nav__link:hover {
  background-color: var(--color-white);
}

.case-nav__link--next {
  text-align: right;
}

.case-nav__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
}

.case-nav__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-charcoal);
}

/* --- Footer --- */
.footer {
  background-color: var(--color-charcoal);
  color: var(--color-warm-gray-light);
  padding: 4rem 0 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-cream);
  margin-bottom: 1rem;
}

.footer__brand span {
  color: var(--color-terracotta-light);
}

.footer__text {
  font-size: 0.9375rem;
  color: var(--color-warm-gray-light);
  line-height: 1.7;
  max-width: 300px;
}

.footer__heading {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__link {
  font-size: 0.9375rem;
  color: var(--color-warm-gray-light);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-terracotta-light);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.footer__socials {
  display: flex;
  gap: 1rem;
}

.footer__social {
  color: var(--color-warm-gray-light);
  transition: color var(--transition-fast);
}

.footer__social:hover {
  color: var(--color-terracotta-light);
}

/* --- About Bio --- */
.about-bio {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.about-bio__image {
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-bio__image .placeholder-img {
  aspect-ratio: 3/4;
}

.about-bio__content h3 {
  margin-bottom: 1.5rem;
}

.about-bio__content p {
  margin-bottom: 1.25rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process__connector { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 4rem;
    --section-padding-sm: 3rem;
  }

  .navbar__links { display: none; }
  .navbar__cta { display: none; }
  .navbar__hamburger { display: flex; }

  .hero { min-height: 80vh; }
  .hero--page { min-height: 30vh; }

  .hero__name {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }

  .hero__role-line { width: 1.5rem; }
  .hero__scroll { display: none; }

  .featured-gallery {
    grid-template-columns: 1fr;
  }

  .featured-gallery__item--large {
    grid-row: auto;
  }

  .featured-gallery__item--large .featured-gallery__image-wrap img {
    aspect-ratio: 4/3;
  }

  .featured-work__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

  .portfolio-card__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(45,45,45,0.75) 0%, transparent 50%);
  }

  .about-bio {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .case-gallery--2col { grid-template-columns: 1fr; }

  .case-nav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .case-nav__link--next { text-align: left; }

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

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .cta-banner {
    padding: 3rem 1.5rem;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 2.5rem; }
  .hero__tagline br { display: none; }
  .filter-bar { gap: 0.5rem; }
  .filter-btn { padding: 0.5rem 1rem; font-size: 0.8125rem; }
  .case-hero__meta { flex-direction: column; gap: 0.5rem; }
  .color-palette { justify-content: center; }
  .featured-gallery__info { flex-wrap: wrap; }
}

/* --- Utility --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

/* ============================================================
   HOMEPAGE — SECTIONS ADDED FOR FRAMER REPLICA
   ============================================================ */

.container--narrow {
  max-width: 760px;
}

/* --- Services row --- */
.services-row__header {
  margin-bottom: 3.5rem;
  max-width: 720px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.service-card {
  padding: 2.25rem 1.75rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-cream-dark);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 45, 0.06);
  border-color: var(--color-terracotta-light);
}

.service-card__num {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-terracotta);
  margin-bottom: 2rem;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
}

.service-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-warm-gray);
  margin: 0;
}

/* --- Featured projects grid (4-up) --- */
.featured-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}

.project-card {
  display: block;
}

.project-card__image-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
}

.project-card__image-wrap .placeholder-img,
.project-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .placeholder-img,
.project-card:hover .project-card__image-wrap img {
  transform: scale(1.04);
}

.project-card__info {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0 0;
}

.project-card__category {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.project-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-charcoal);
  flex: 1;
  margin: 0;
}

.project-card__arrow {
  font-size: 1.25rem;
  color: var(--color-warm-gray-light);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.project-card:hover .project-card__arrow {
  color: var(--color-terracotta);
  transform: translateX(4px);
}

/* --- Why-choose-me pillars --- */
.pillars__header {
  margin-bottom: 3.5rem;
  max-width: 720px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.pillar {
  padding: 2rem 0;
}

.pillar__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-terracotta);
  margin-bottom: 1.75rem;
  border: 1px solid var(--color-cream-dark);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}

.pillar__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-warm-gray);
  margin: 0;
}

/* --- Testimonials --- */
.testimonials__header {
  margin-bottom: 3.5rem;
  max-width: 720px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial {
  margin: 0;
  padding: 2rem;
  background-color: var(--color-cream);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-charcoal);
  margin: 0;
  letter-spacing: -0.005em;
}

.testimonial__quote::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.1;
  color: var(--color-terracotta);
  margin-right: 0.15em;
  vertical-align: -0.2em;
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  margin-top: auto;
}

.testimonial__author span:first-child {
  color: var(--color-charcoal);
  font-weight: 500;
}

.testimonial__author span:last-child {
  color: var(--color-warm-gray);
}

/* --- FAQ --- */
.faq__header {
  margin-bottom: 3rem;
  text-align: center;
}

.faq__header .section-subtitle,
.faq__header .section-title {
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-cream-dark);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--color-terracotta-light);
}

.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-charcoal);
  cursor: pointer;
  user-select: none;
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__icon {
  width: 22px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-charcoal);
  transition: transform var(--transition-fast);
}

.faq-item__icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item__a {
  padding: 0 1.75rem 1.5rem;
}

.faq-item__a p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
  color: var(--color-warm-gray);
}

/* --- Blog / Explorations --- */
.blog__header {
  margin-bottom: 3rem;
}

.blog__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.blog-card__image-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
}

.blog-card__image-wrap .placeholder-img,
.blog-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card:hover .placeholder-img,
.blog-card:hover .blog-card__image-wrap img {
  transform: scale(1.04);
}

.blog-card__date {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-warm-gray);
  margin-bottom: 0.5rem;
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-charcoal);
  margin: 0;
}

/* --- Responsive (homepage additions) --- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .featured-projects-grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq-item__q { padding: 1.25rem 1.25rem; font-size: 1rem; }
  .faq-item__a { padding: 0 1.25rem 1.25rem; }
  .blog__header-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ============================================================
   FRAMER REPLICA — HOMEPAGE
   ============================================================ */

:root {
  --fr-bg: #000000;
  --fr-bg-soft: #0d0d0d;
  --fr-ink: #ffffff;
  --fr-ink-muted: #8a8a8a;
  --fr-line: rgba(255, 255, 255, 0.14);
  --fr-accent: #ffffff;
  --fr-font: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
  --fr-display: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
  --fr-container: 1560px;
}

body:has(.fr-hero) {
  background: var(--fr-bg);
  color: var(--fr-ink);
  font-family: var(--fr-font);
}

body:has(.fr-hero) p,
body:has(.fr-hero) blockquote,
body:has(.fr-hero) time,
body:has(.fr-hero) li,
.fr-nav__link,
.fr-nav__logo,
.fr-hero__intro,
.fr-service__desc,
.fr-scroll-cue {
  font-family: var(--fr-font);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fr-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 9vw;
}

.fr-container--narrow { max-width: 880px; }

/* --- NAV --- */
.fr-nav {
  position: relative;
  z-index: 1000;
  background: var(--fr-bg);
  border-bottom: 1px solid var(--fr-line);
}

.fr-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 0 auto;
  padding: 1.6rem 9vw;
}

.fr-nav__logo {
  font-family: var(--fr-font);
  font-weight: 600;
  font-size: 1.4375rem;
  letter-spacing: 0;
  color: var(--fr-ink);
  white-space: nowrap;
  flex: 2;
  text-align: center;
  margin: 0 1rem;
}

.fr-nav__link {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--fr-ink);
  padding: 0;
  border-radius: 0;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.fr-nav__link:hover { color: #f2b8ff; }
.fr-nav__link--active { opacity: 1; }

.fr-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.fr-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fr-ink);
  border-radius: 2px;
  transition: all 0.2s;
}
.fr-nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.fr-nav__hamburger.active span:nth-child(2) { opacity: 0; }
.fr-nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.fr-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--fr-bg);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.fr-mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.fr-mobile-menu a {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--fr-ink);
}

/* --- HERO --- */
.fr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.75rem 1.25rem;
  text-align: center;
  min-height: calc(100vh - 80px);
  box-sizing: border-box;
}

.fr-hero__portrait {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  aspect-ratio: 4/5;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: center center;
  animation: heroPortraitReveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes heroPortraitReveal {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-hero__portrait {
    animation: none;
  }
}

.fr-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-position: center;
  object-fit: cover;
}
.fr-hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 18%, transparent 60%, rgba(0,0,0,0.85) 90%, #000 100%),
    linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 14%, transparent 86%, rgba(0,0,0,0.6) 100%);
}

.fr-hero__intro {
  font-family: var(--fr-font);
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--fr-ink);
  max-width: 600px;
  margin: 0;
  flex-shrink: 0;
}

/* --- HERO TEXT GROUP (intro + scroll cue, moves as one) --- */
.fr-hero__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* --- SCROLL CUE --- */
.fr-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--fr-font);
  font-size: 0.9375rem;
  color: var(--fr-ink);
  margin: 0;
  text-align: center;
}
.fr-scroll-cue svg {
  animation: scrollBob 2s ease-in-out infinite;
  color: var(--fr-ink);
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* --- SERVICES --- */
.fr-services {
  padding: 2rem 0 6rem;
  background: var(--fr-bg);
}

.fr-services .fr-container {
  max-width: var(--fr-container);
}

.fr-service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 6rem 0;
  border-top: 1px solid var(--fr-line);
}
.fr-service:first-of-type {
  border-top: none;
}
.fr-service:last-of-type {
  border-bottom: 1px solid var(--fr-line);
}

.fr-service__title {
  font-family: var(--fr-display);
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fr-ink);
  margin: 0;
  cursor: default;
  transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover the title swaps to the Pacifico script font and its
   colour rotates: odd rows (Branding, Graphic) go pink; even rows
   (Packaging, Animation) go blue. Font-family can't be tweened, so
   the typeface switches instantly while the colour eases. */
.fr-service__title:hover {
  font-family: 'Pacifico', cursive;
  letter-spacing: 0;
}
.fr-service:nth-of-type(odd) .fr-service__title:hover {
  color: #f2b8ff;
}
.fr-service:nth-of-type(even) .fr-service__title:hover {
  color: #6f81e9;
}

.fr-service__desc {
  font-family: var(--fr-font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0;
  max-width: 38ch;
  text-align: left;
}

/* Right-variant: title flush far right; body box in the opposite (left) corner */
.fr-service--right .fr-service__title {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}
.fr-service--right .fr-service__desc {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

/* Left-variant: title flush far left; body box in the opposite (right) corner */
.fr-service--left .fr-service__title {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  text-align: left;
}
.fr-service--left .fr-service__desc {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* --- WORK --- */
.fr-work {
  position: relative;
  padding: 14rem 0 18rem;
}

.fr-work__heading {
  /* Pin the heading near the top of the viewport while the project
     tiles scroll past it. The heading stays still and the tiles
     slide up over it, creating an "overflow" feel. */
  position: sticky;
  top: 2vh;
  z-index: 1;
  font-family: var(--fr-display);
  font-size: clamp(5.5rem, 16vw, 13rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--fr-ink);
  margin: 0 0 8rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25em;
  pointer-events: none;
}

/* Empty scroll buffer between the heading and the project cards.
   Its height defines how long the WORK letter-fill animation lasts —
   400vh = 4 viewports = one viewport of scroll per letter. */
.fr-work__fill-spacer {
  height: 400vh;
  pointer-events: none;
}


.fr-outline-heading__solid {
  color: var(--fr-ink);
}

.fr-outline-heading__outline {
  /* Container — individual letters carry the stroke and fill so each can
     animate independently. */
  color: transparent;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  display: inline-flex;
}

.fr-outline-heading__outline .fr-letter {
  display: inline-block;
  color: rgba(242, 184, 255, 0);
  -webkit-text-stroke: 1.5px #ffffff;
  text-stroke: 1.5px #ffffff;
  will-change: color;
}

.fr-why__heading,
.fr-testimonials__heading,
.fr-faq__heading,
.fr-blog__heading {
  font-family: var(--fr-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--fr-ink);
  margin: 0 0 3.5rem;
}

.fr-why__heading em,
.fr-testimonials__heading em,
.fr-faq__heading em,
.fr-blog__heading em {
  font-style: italic;
  font-family: var(--fr-display);
  font-weight: 400;
  color: var(--fr-ink);
}

.fr-work__grid {
  position: relative;
  z-index: 5;
}

.fr-work__item {
  display: block;
  text-decoration: none;
  color: inherit;
  will-change: opacity, transform;
  transform-origin: center top;
  margin-bottom: 6rem;
  /* Cards pin BELOW the "Latest WORK" heading (which sticks at 2vh).
     All cards share the same sticky top, so each successive card
     lands directly on top of card 1. The heading stays untouched
     above. */
  position: sticky;
  top: 20vh;
}
.fr-work__item:last-child {
  margin-bottom: 0;
}

.fr-work__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--fr-bg-soft);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.fr-work__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fr-work__item:hover .fr-work__image img {
  transform: scale(1.04);
}

/* Static per-card badge is replaced by the global cursor follower below */
.fr-work__badge {
  display: none;
}

/* Global cursor-following "see more" pill — follows the pointer when
   hovering project images, replacing the system cursor with the pill. */
.fr-work-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: var(--fr-font);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%) scale(0.7);
  transition:
    opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s,
    color 0.3s;
  will-change: transform, opacity;
}

.fr-work-cursor.is-visible {
  opacity: 1;
  background: #000;
  color: #fff;
}

/* Suppress the system cursor while hovering the project image so only the
   custom pill is shown. */
.fr-work__item .fr-work__image,
.fr-work__item .fr-work__image * {
  cursor: none;
}

/* Project meta sits in the TOP-LEFT of each image with a subtle dark
   gradient behind for legibility (matches the original overlay style). */
.fr-work__meta {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  pointer-events: none;
}

.fr-work__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 28%, transparent 50%);
}

.fr-work__title {
  font-family: var(--fr-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
}

.fr-work__category {
  font-family: var(--fr-font);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 768px) {
  .fr-work__grid { gap: 1rem !important; }
  .fr-work__item {
    margin: 0 !important;
    padding: 4px 0 !important;
  }
  /* Tighten the gap below the last project card before the
     Why Choose Me? section. */
  .fr-work { padding-bottom: 5rem !important; }
  .fr-why { padding-top: 4rem !important; }
  .fr-work__image { aspect-ratio: 4/3; }
  .fr-work__meta { top: 1.25rem; left: 1.25rem; right: 1.25rem; }
}

/* --- WHY --- */
.fr-why {
  padding: 8rem 0;
  background: var(--fr-bg);
}

.fr-why__heading {
  text-align: center;
  margin: 0 0 5rem;
  font-weight: 500;
}

.fr-why__highlight {
  color: #6f81e9;
  font-style: normal;
}

.fr-why__layout {
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 5rem;
  align-items: start;
}

.fr-why__accordion {
  display: flex;
  flex-direction: column;
}

.fr-pillar {
  border-top: 1px solid var(--fr-line);
  padding: 0;
}
.fr-pillar:first-child {
  border-top: none;
}
.fr-pillar:first-child > .fr-pillar__header {
  padding-top: 0;
}
.fr-pillar:last-child {
  border-bottom: 1px solid var(--fr-line);
}

.fr-pillar__header {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.25rem 0;
  cursor: pointer;
  transition: color 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-pillar__header::-webkit-details-marker { display: none; }

.fr-pillar__title {
  font-family: var(--fr-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0;
  transition: color 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fr-pillar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-ink);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              color 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fr-pillar[open] .fr-pillar__arrow {
  /* 90° clockwise — rotates the up-right arrow downward so its tip
     points down toward the expanded content below. */
  transform: rotate(90deg);
  color: #6f81e9;
}

.fr-pillar[open] .fr-pillar__title {
  color: var(--fr-ink);
}

/* Force the desc wrapper to render even when <details> is closed so the
   height transition has something to interpolate against. The
   grid-rows 0fr→1fr is what makes the text "slide down" smoothly. */
.fr-pillar > .fr-pillar__desc-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-pillar[open] > .fr-pillar__desc-grid {
  grid-template-rows: 1fr;
}
.fr-pillar__desc-inner {
  overflow: hidden;
}

.fr-pillar__desc {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0;
  padding: 0 0 2.25rem;
  max-width: 48ch;
  /* Pure slide-DOWN reveal — text starts above its resting position
     and slides downward into view as the row expands. Combined with
     the grid-rows 0fr → 1fr and overflow:hidden on the wrapper, the
     text reads as if it's dropping down into the question's open
     space every time the question is opened. */
  transform: translateY(-18px);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-pillar[open] .fr-pillar__desc {
  transform: translateY(0);
}

.fr-why__image {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--fr-bg-soft);
  aspect-ratio: 1 / 1;
}
.fr-why__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity, filter;
}
/* The non-active layer parks fully OFF-SCREEN to the right — still
   at full opacity, no blur. The container's overflow:hidden clips
   it. JS slides it into view on the next swap (or to the left if
   moving up the accordion list). Pure horizontal scroll, no fade. */
.fr-why__img:not(.is-active) {
  opacity: 1;
  transform: translateX(104%);
  filter: none;
}

/* Desktop: hide the per-pillar image media, mobile-only heading, and
   the carousel nav buttons. They only appear in the mobile carousel
   mode below. */
.fr-pillar__media { display: none; }
.fr-pillar__title-mobile { display: none; }
.fr-why__nav { display: none; }

@media (max-width: 768px) {
  /* Mobile: each pillar is a horizontal-scroll card. Image on top,
     then title + description (always visible). Side arrows step
     through one card at a time. */
  .fr-why__layout {
    display: block;
    position: relative;
  }
  .fr-why__image { display: none; }

  .fr-why__accordion {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
  }
  .fr-why__accordion::-webkit-scrollbar { display: none; }

  .fr-pillar,
  .fr-pillar:first-child,
  .fr-pillar:last-child {
    flex: 0 0 calc(100% - 1rem);
    scroll-snap-align: center;
    border: 1px solid var(--fr-line);
    border-radius: 1rem;
    background: var(--fr-bg-soft);
    padding: 0;
    overflow: hidden;
    /* Force visual order: image → heading → body, regardless of the
       browser's default "summary first" rendering inside <details>. */
    display: flex;
    flex-direction: column;
  }
  /* Make sure any AOS fade animations don't leave pillars invisible
     after they scroll into / out of the viewport in the carousel. */
  .fr-pillar[data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide the original <summary> on mobile — its accordion role is
     not needed when every card is permanently expanded. The visible
     heading is provided by .fr-pillar__title-mobile, which sits in
     DOM order between the image and the description. */
  .fr-pillar__header { display: none !important; }
  .fr-pillar__media {
    display: block !important;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 2rem;
  }
  .fr-pillar__title-mobile {
    display: block !important;
    font-family: var(--fr-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--fr-ink);
    margin: 0 0 0.5rem;
    padding: 0 1.25rem;
  }
  /* Description always visible — no accordion toggle behaviour. */
  .fr-pillar > .fr-pillar__desc-grid {
    grid-template-rows: 1fr !important;
    transition: none !important;
  }
  .fr-pillar__desc {
    padding: 0 1.25rem 1.75rem;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    font-size: 1rem;
  }

  /* Side nav arrows — circular buttons hovering the carousel left
     and right edges. */
  .fr-why__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--fr-bg);
    color: var(--fr-ink);
    border: 1px solid var(--fr-line);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .fr-why__nav:hover {
    background: var(--fr-ink);
    color: var(--fr-bg);
  }
  .fr-why__nav--prev { left: -0.75rem; }
  .fr-why__nav--next { right: -0.75rem; }
  .fr-why__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
}

/* --- TESTIMONIALS --- */
.fr-testimonials { padding: 6rem 0; overflow: hidden; }
.fr-testimonials__heading {
  text-align: center;
  font-weight: 500;
}
.fr-testimonials__heading em {
  font-style: normal;
  font-weight: 500;
}
.fr-testimonials__accent {
  color: #f2b8ff;
}

/* Two-row marquee: top row scrolls left, bottom scrolls right.
   Each track holds the original 5 cards plus a duplicate set,
   and a -50% translate creates a seamless infinite loop. */
.fr-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.75rem 0;
}
.fr-marquee + .fr-marquee {
  margin-top: 1.5rem;
}
.fr-marquee__track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  will-change: transform;
}
.fr-marquee--left .fr-marquee__track {
  animation: marqueeLeft 25s linear infinite;
}
.fr-marquee--right .fr-marquee__track {
  animation: marqueeRight 25s linear infinite;
}
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.75rem)); }
}
@keyframes marqueeRight {
  from { transform: translateX(calc(-50% - 0.75rem)); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-marquee__track { animation: none; }
}

.fr-quote {
  margin: 0;
  padding: 2.25rem;
  background: var(--fr-bg-soft);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 0 auto;
  width: 26rem;
}
.fr-quote blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--fr-ink);
}
.fr-quote figcaption {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--fr-line);
}
.fr-quote__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2b8ff 0%, #6f81e9 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-transform: uppercase;
  overflow: hidden;
}
/* When an <img> is dropped inside the avatar (real photo), it fills
   the circle. The gradient fallback shows for reviewers whose
   avatars are still text initials. */
.fr-quote__avatar img,
.fr-slide__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.fr-quote__person {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.fr-quote figcaption strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fr-ink);
}
.fr-quote figcaption span:not(.fr-quote__avatar):not(.fr-quote__person) {
  font-size: 0.8125rem;
  color: var(--fr-ink-muted);
}
.fr-quote__person span {
  font-size: 0.8125rem;
  color: var(--fr-ink-muted);
}

/* --- FAQ --- */
.fr-faq { padding: 8rem 0; background: var(--fr-bg); }

.fr-faq__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}

.fr-faq__intro {
  position: sticky;
  top: 18vh;
}

.fr-faq__heading {
  text-align: left;
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1;
}

.fr-faq__highlight {
  color: #6f81e9;
  font-style: normal;
}

.fr-faq__sub {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  color: var(--fr-ink);
  margin: 0;
  max-width: 32ch;
}

.fr-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* All FAQ open/close motion rides the same curve and the same 0.7s
   duration — background tint, chevron, height expand, and answer fade
   all begin and settle on the same frame so the panel feels like a
   single object animating, not four parts loosely synced. */
.fr-faq__item {
  background: transparent;
  /* Dark grey-purple border — picks up the accent hue used in
     fr-why__highlight (#6f81e9) but at low opacity so it reads as
     a quiet, premium hairline rather than a coloured outline. */
  border: 1px solid rgba(125, 120, 165, 0.32);
  border-radius: 14px;
  overflow: hidden;
  transition: background 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fr-faq__item[open] {
  background: #1c1c1c;
  border-color: transparent;
}

.fr-faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 1.75rem;
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--fr-ink);
  cursor: pointer;
}
.fr-faq__item summary::-webkit-details-marker { display: none; }

.fr-faq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fr-ink);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-faq__item[open] .fr-faq__chevron {
  /* Negative rotation sweeps the chevron counter-clockwise — visually
     "rotating upward" toward its open state — and lands on the same
     final ^ shape as a positive 180°. */
  transform: rotate(-180deg);
}

/* The grid wrapper is always rendered (overriding the browser default
   of hiding non-summary <details> children when closed) so we can
   transition grid-template-rows between 0fr and 1fr in lockstep with
   the rest of the panel. */
.fr-faq__item > .fr-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-faq__item[open] > .fr-faq__answer-wrap {
  grid-template-rows: 1fr;
}
.fr-faq__answer {
  overflow: hidden;
  padding: 0 1.75rem 1.5rem;
}
.fr-faq__answer p {
  margin: 0;
  font-family: var(--fr-font);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fr-ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-faq__item[open] .fr-faq__answer p {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile FAQ: stacked layout with the heading + intro centred, but
   the question summaries and answer paragraphs stay left-aligned. */
@media (max-width: 768px) {
  .fr-faq__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .fr-faq__intro {
    position: static;
    top: auto;
    text-align: center;
  }
  .fr-faq__heading { text-align: center; }
  .fr-faq__sub { margin: 0 auto; }
}

/* --- BLOG --- */
.fr-blog { padding: 6rem 0; background: var(--fr-bg); color: var(--fr-ink); }
.fr-blog__heading {
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}
.fr-blog__accent {
  color: #f2b8ff;
}
.fr-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.fr-blog__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}
.fr-blog__card:hover .fr-blog__body h3,
.fr-blog__card:hover .fr-blog__link {
  color: #6f81e9;
}
.fr-blog__image {
  aspect-ratio: 4/3;
  border-radius: 0;
  overflow: hidden;
  background: var(--fr-bg-soft);
  border-bottom: 1px solid var(--fr-line);
}
.fr-blog__body {
  padding: 1.5rem 1.5rem 1.75rem;
}
.fr-blog__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fr-blog__card:hover .fr-blog__image img { transform: scale(1.04); }
.fr-blog__body time {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fr-ink-muted);
  margin-bottom: 0.5rem;
}
.fr-blog__body h3 {
  font-family: var(--fr-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0 0 1rem;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-blog__link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fr-accent);
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-blog__link:hover { text-decoration: underline; }

/* --- FOOTER --- */
.fr-footer {
  background: var(--fr-bg);
  color: var(--fr-ink);
  padding: 5rem 0 2rem;
  border-top: 1px solid var(--fr-line);
}
.fr-footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--fr-line);
  align-items: start;
}
.fr-footer__logo {
  font-family: var(--fr-display);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  color: var(--fr-ink);
}
.fr-footer__brand p {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  color: var(--fr-ink-muted);
}
.fr-footer__brand a { color: var(--fr-ink); }

.fr-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: center;
}
.fr-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--fr-line);
  color: var(--fr-ink);
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-footer__social a:hover {
  color: #f2b8ff;
  border-color: #f2b8ff;
}
.fr-footer__cols {
  display: flex;
  gap: 5rem;
  justify-self: end;
}
.fr-footer__cols h4 {
  font-family: var(--fr-font);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fr-ink-muted);
  margin: 0 0 1.25rem;
}
.fr-footer__cols ul { padding: 0; margin: 0; list-style: none; }
.fr-footer__cols li { margin-bottom: 0.625rem; }
.fr-footer__cols a {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  color: var(--fr-ink);
  transition: opacity 0.2s;
}
.fr-footer__cols a:hover { opacity: 0.65; }
.fr-footer__bottom {
  padding-top: 2rem;
  font-family: var(--fr-font);
  font-size: 0.75rem;
  color: var(--fr-ink-muted);
}

/* --- ABOUT PAGE --- */

/* Hero — large editorial heading centered at the top, three portrait
   images sitting in a row beneath. The heading and gallery share the
   container's max-width so they read as one block. */
.fr-about-hero {
  padding: 8rem 0 5rem;
  background: var(--fr-bg);
}
.fr-about-hero__heading {
  font-family: var(--fr-display);
  font-size: clamp(2rem, 4.75vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fr-ink);
  text-align: center;
  margin: 0 auto 4rem;
  max-width: 16ch;
}
.fr-about-hero__heading-accent { color: #f2b8ff; }
.fr-about-hero__gallery {
  display: grid;
  /* First image takes ~2× the width of each of the other two so it
     visually anchors the row, while all three share the same height
     (set via grid-auto-rows below) for a clean horizontal line. */
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-auto-rows: clamp(320px, 38vw, 520px);
  gap: 1.25rem;
}
.fr-about-hero__image {
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--fr-bg-soft);
  width: 100%;
  height: 100%;
}
.fr-about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vision / Mission — two rounded cards side by side. Same border
   treatment as the FAQ cards so the page reads as one design system. */
.fr-about-pillars {
  padding: 5rem 0;
  background: var(--fr-bg);
}
.fr-about-pillars__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.fr-about-pillar {
  background: var(--fr-bg-soft);
  border: none;
  border-radius: 18px;
  padding: 4.5rem 3rem;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fr-about-pillar__title {
  font-family: var(--fr-display);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0 0 1.25rem;
}
.fr-about-pillar__body {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fr-ink);
  margin: 0;
  max-width: 46ch;
}

/* Journey — vertical roadmap with cards alternating either side of
   a centred hairline. AOS slides each card in from its own side as
   it enters the viewport, so the timeline reveals one stop at a
   time as the user scrolls. */
.fr-about-journey {
  padding: 3rem 0 7rem;
  background: var(--fr-bg);
}
.fr-about-journey__heading {
  font-family: var(--fr-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fr-ink);
  text-align: center;
  margin: 0 0 1rem;
}
.fr-about-journey__accent { color: #f2b8ff; }
.fr-about-journey__sub {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fr-ink);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 0;
}
/* Curving snake road — fixed aspect-ratio container holding an SVG
   path that s-curves between four anchor points (alternating left
   and right). JS drives a pink trail that draws in along the path
   and a dot that rides it as the user scrolls. */
/* Pin wrapper — only the road map sticks to the viewport for ~4
   scroll units while milestones reveal one per scroll. The "My
   Journey" heading scrolls past normally above. The road map is
   parked near the vertical centre so it sits in focus during the
   pin. After the wrapper is fully scrolled past, the next section
   comes in. */
.fr-journey-pin {
  position: relative;
  height: 400vh;
}
.fr-journey-pin > .fr-journey {
  position: sticky;
  top: 4vh;
  /* Cap the width so the road map's full height (derived from the
     1000/720 aspect ratio) always fits in one viewport. Width
     prefers 1080px, but is reduced on shorter screens so:
       height = width × 720/1000 ≤ ~90vh
     leaving room above (top: 4vh) and below for breathing room. */
  max-width: min(1080px, 125vh);
}

/* Mobile: centre the road map vertically in the viewport while it's
   pinned, and scale it up so it covers a larger visible area.
   Heading + sub get extra bottom margin so the heading scrolls fully
   out of view before the road map enters its centred sticky
   position — no overlap. */
@media (max-width: 768px) {
  .fr-about-journey__sub { margin-bottom: 6rem; }
  .fr-journey {
    max-width: 100%;
    /* Keep the natural 1000/720 aspect ratio — same as desktop —
       so the path arcs render perfectly round, not stretched. */
  }
  .fr-journey-pin > .fr-journey {
    top: 4vh;
    /* Uniform scale — both width and height grow together so the
       curves stay perfectly circular. Bigger scale = taller path
       on mobile without distorting the arcs. */
    transform: scale(1.8);
    transform-origin: center top;
    max-width: 100%;
  }
  /* Wider stop cards on mobile so the milestone text doesn't squeeze
     into a narrow column. */
  .fr-journey__stop {
    width: 44% !important;
  }
  /* Bring the stop cards closer to the dot on mobile so the year
     text sits just below the path with minimal gap. */
  .fr-journey__stop--1 { top: 17.5% !important; }
  .fr-journey__stop--2 { top: 39.5% !important; }
  .fr-journey__stop--3 { top: 61.5% !important; }
  .fr-journey__stop--4 { top: 83.5% !important; }

  /* Mobile milestone card text: 5px top + bottom padding on each
     line so year / title / body sit with even breathing room. */
  .fr-journey__year {
    font-size: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0.95 !important;
  }
  .fr-journey__title {
    font-size: 6px !important;
    padding: 0 0 2px !important;
    margin: -2px 0 0 !important;
    line-height: 0.95 !important;
  }
  .fr-journey__body {
    font-size: 6px !important;
    padding: 2px 0 !important;
    margin: 0 auto !important;
    line-height: 1.2 !important;
    max-width: 80% !important;
  }
}

.fr-journey {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1000 / 720;
}
/* JS adds this class on mobile and swaps in a taller path
   (1000×760 viewBox with 100-unit arc radii). Container
   aspect-ratio must match so the new path renders at its
   natural size — round arcs, no stretching. */
.fr-journey--mobile {
  aspect-ratio: 1000 / 760;
}
.fr-journey--mobile .fr-journey__stop--1 { top: 12% !important; }
.fr-journey--mobile .fr-journey__stop--2 { top: 38.5% !important; }
.fr-journey--mobile .fr-journey__stop--3 { top: 65% !important; }
.fr-journey--mobile .fr-journey__stop--4 { top: 91% !important; }
.fr-journey__road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Pink trail — JS sets stroke-dasharray + stroke-dashoffset so it
   draws in from the start of the path as the user scrolls. */
.fr-journey__trail {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.18s linear;
}
/* The dot rides the path — JS sets cx/cy via getPointAtLength on
   every scroll frame. No CSS transition on cx/cy: the dot follows
   the JS-computed path position directly, frame-by-frame, so the
   motion stays bonded to the scroll and never gets out of sync. */
.fr-journey__dot {
  fill: #f2b8ff;
  stroke: var(--fr-bg);
  stroke-width: 5;
  filter: drop-shadow(0 0 10px rgba(242, 184, 255, 0.65));
}

/* Removed legacy straight-line styles — kept aliases as no-ops so
   nothing else depending on them breaks. */
.fr-journey__line,
.fr-journey__line-fill,
.fr-journey__marker { display: none; }
/* Milestone labels — naked text centred at the dot's stop x. The
   card is centred on its anchor via translateX(-50%) so the text
   block sits horizontally centred under wherever the dot lands. */
.fr-journey__stop {
  position: absolute;
  width: 36%;
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-journey__stop.is-reached {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Cards anchored to the dot's resting x. The dot stops at x=400 for
   cards 1 & 3 (slightly left of true centre) and x=600 for cards
   2 & 4 (slightly right). The card centres on that x. */
.fr-journey__stop--1 { top: 19%; left: 40%; }
.fr-journey__stop--2 { top: 41%; left: 60%; }
.fr-journey__stop--3 { top: 63%; left: 40%; }
.fr-journey__stop--4 { top: 85%; left: 60%; }

/* End-of-road marker — sits just past where segment 4 terminates
   (x=300, y=600 in viewBox), continuing the leftward direction.
   Hidden by default; .is-reached fades it in when the dot arrives
   at the final stop. */
.fr-journey__end {
  position: absolute;
  top: 85%;
  left: 17%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(168, 212, 255, 0.85);
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-journey__end.is-reached {
  opacity: 1;
  transform: translateX(0);
}
.fr-journey__end-arrow {
  flex: 0 0 auto;
}
.fr-journey__end-label {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  font-style: italic;
  color: #f2b8ff;
  white-space: nowrap;
}

/* Year + title + body — share styles with the previous design but
   re-namespaced to .fr-journey__* so the old serpentine rules can
   be removed cleanly. */
.fr-journey__year {
  display: inline-block;
  font-family: var(--fr-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #f2b8ff;
  margin-bottom: 0.25rem;
}
.fr-journey__title {
  font-family: var(--fr-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fr-ink);
  margin: 0 0 0.3rem;
}
.fr-journey__body {
  font-family: var(--fr-font);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--fr-ink-muted);
  margin: 0;
}

.fr-about-journey__year {
  display: inline-block;
  font-family: var(--fr-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f2b8ff;
  margin-bottom: 0.65rem;
}
.fr-about-journey__title {
  font-family: var(--fr-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0 0 0.75rem;
}
.fr-about-journey__body {
  font-family: var(--fr-font);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fr-ink);
  margin: 0;
}

/* Story — heading + paragraphs on the left, large square image on
   the right. Mirrors the editorial pacing of the Why Choose Me layout. */
.fr-about-story {
  padding: 22rem 0 7rem;
  background: var(--fr-bg);
}
.fr-about-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.fr-about-story__heading {
  font-family: var(--fr-display);
  font-size: clamp(2rem, 4.25vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fr-ink);
  margin: 0 0 2rem;
  max-width: 14ch;
}
.fr-about-story__heading-accent { color: #f2b8ff; }
.fr-about-story__heading-trail {
  font-size: calc(1em - 2px);
}
.fr-about-story__content p {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fr-ink);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}
.fr-about-story__content p:last-child { margin-bottom: 0; }
.fr-about-story__image {
  aspect-ratio: 1 / 1;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--fr-bg-soft);
}
.fr-about-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- WORK / PORTFOLIO PAGE --- */

/* Hero — centred title with a pink-accented word, plus a row of pill
   filter buttons. Matches the editorial pacing of the about hero. */
.fr-work-hero {
  padding: 8rem 0 2.5rem;
  background: var(--fr-bg);
  text-align: center;
}
.fr-work-hero__heading {
  font-family: var(--fr-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fr-ink);
  margin: 0 auto;
  max-width: 20ch;
}
.fr-work-hero__accent { color: #f2b8ff; }
.fr-work-hero__filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.fr-filter-pill {
  font-family: var(--fr-font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fr-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.fr-filter-pill:hover { border-color: rgba(242, 184, 255, 0.45); }
.fr-filter-pill--active {
  background: var(--fr-ink);
  color: #000;
  border-color: var(--fr-ink);
}

/* Featured block — full-width yellow card sitting between the hero
   and the project grid. Hover lifts it slightly and tightens the
   shadow for a tactile feel. */
.fr-work-feature {
  padding: 2rem 0;
  background: var(--fr-bg);
}
.fr-work-feature__block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  background: #f5d36a;
  border-radius: 22px;
  min-height: 40vh;
  padding: 2.5rem 2.5rem;
  text-decoration: none;
  color: #000;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.fr-work-feature__block:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(245, 211, 106, 0.18);
}
.fr-work-feature__label {
  font-family: var(--fr-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.fr-work-feature__title {
  font-family: var(--fr-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Project rows — alternating between two equal cards and one wide
   card. The wide card pairs an image with a meta block (title + body
   copy) sitting beneath it. */
.fr-work-projects {
  padding: 2rem 0 5rem;
  background: var(--fr-bg);
}
/* Single grid for every project. Wide / hero cards span both
   columns; the rest occupy one. When a filter hides a card, grid
   auto-flow naturally reflows the remaining cards left-to-right
   with no empty positions. */
.fr-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 1.75rem;
}
.fr-work-card--hero,
.fr-work-card--wide { grid-column: 1 / -1; }

/* Hold-over rule kept so any leftover .fr-work-row markup elsewhere
   doesn't collapse oddly. New work page uses .fr-work-grid. */
.fr-work-row {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 4rem;
}
.fr-work-row--two { grid-template-columns: 1fr 1fr; }
.fr-work-row--one { grid-template-columns: 1fr; }
.fr-work-row:last-child { margin-bottom: 0; }

.fr-work-card {
  display: block;
  text-decoration: none;
  color: var(--fr-ink);
  transition: transform 0.35s ease;
}
.fr-work-card:hover { transform: translateY(-2px); }
.fr-work-card__image {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 18px;
  background: var(--fr-bg-soft);
  margin-bottom: 1rem;
}
.fr-work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fr-work-card:hover .fr-work-card__image img { transform: scale(1.04); }
.fr-work-card__title {
  font-family: var(--fr-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0 0 0.25rem;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-work-card__category {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  color: var(--fr-ink);
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fr-work-card:hover .fr-work-card__title,
.fr-work-card:hover .fr-work-card__category {
  color: #f2b8ff;
}

/* Hero variant — first project sits at full width with a tall, panoramic
   image and the title + category centred beneath it. */
/* Hero cover matches the LUMOV Cover image's native ratio (4167×2626
   ≈ 16:10) so object-fit: cover has nothing to crop. */
.fr-work-card--hero .fr-work-card__image { aspect-ratio: 4167 / 2626; }
.fr-work-card--hero .fr-work-card__title { font-size: 1.75rem; }

/* Wide variant — image on top, title + description side-by-side below. */
.fr-work-card--wide .fr-work-card__image { aspect-ratio: 16 / 9; }
.fr-work-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.fr-work-card--wide .fr-work-card__title { margin: 0; }
.fr-work-card__desc {
  font-family: var(--fr-font);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0;
  max-width: 50ch;
}

/* Related design work — three blog-style cards at the bottom. */
.fr-work-related {
  padding: 4rem 0 8rem;
  background: var(--fr-bg);
}
.fr-work-related__heading {
  font-family: var(--fr-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fr-ink);
  text-align: center;
  margin: 0 0 3rem;
}
.fr-work-related__accent { color: #f2b8ff; }
.fr-work-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.fr-related-card {
  background: transparent;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  overflow: hidden;
}
.fr-related-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fr-bg-soft);
  border-bottom: 1px solid var(--fr-line);
}
.fr-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fr-related-card:hover .fr-related-card__image img { transform: scale(1.04); }
.fr-related-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.fr-related-card__body time {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fr-ink);
  margin-bottom: 0.5rem;
}
.fr-related-card__body h3 {
  font-family: var(--fr-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fr-ink);
  margin: 0 0 0.875rem;
  transition: color 0.3s ease;
}
.fr-related-card:hover .fr-related-card__body h3 { color: #f2b8ff; }
.fr-related-card__link {
  font-family: var(--fr-font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fr-ink);
  text-decoration: none;
  transition: color 0.3s ease;
}
.fr-related-card__link:hover { color: #f2b8ff; }

/* Like What You See? CTA — soft dark banner with a white pill button
   that flips to pink on hover, mirroring the reviews CTA. */
.fr-work-cta {
  padding: 4rem 0 2rem;
  background: var(--fr-bg);
}
.fr-work-cta--spaced {
  padding-bottom: 8rem;
}
.fr-work-cta__inner {
  background: #f2b8ff;
  border-radius: 22px;
  padding: 4rem 2.5rem;
  text-align: center;
}
.fr-work-cta__inner h2 {
  font-family: var(--fr-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  /* Dark text on light pink for accessible contrast. */
  color: #1a1014;
  margin: 0 0 1rem;
}
.fr-work-cta__inner p {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #1a1014;
  margin: 0 auto 2rem;
  max-width: 52ch;
}
.fr-work-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Black pill on pink panel — inverts to white-on-black on hover. */
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-family: var(--fr-font);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.fr-work-cta__btn:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
  transform: translateY(-1px);
}

/* --- PROJECT CASE-STUDY PAGE (e.g. Lumov) --- */
.fr-case-hero {
  padding: 6rem 0 3rem;
  background: var(--fr-bg);
}
.fr-case-hero__back {
  display: inline-block;
  font-family: var(--fr-font);
  font-size: 0.875rem;
  color: var(--fr-ink-muted);
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color 0.25s ease;
}
.fr-case-hero__back:hover { color: #f2b8ff; }
.fr-case-hero__category {
  display: block;
  font-family: var(--fr-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2b8ff;
  margin-bottom: 1rem;
}
.fr-case-hero__title {
  font-family: var(--fr-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fr-ink);
  text-align: left;
  margin: 0 0 1.25rem;
  max-width: 30ch;
}
/* Keep the service line (the accent) from wrapping — brand name on
   line 1, full service name on line 2, each on its own single line. */
.fr-case-hero__accent { white-space: nowrap; }
.fr-case-hero__accent {
  /* Match the rest of the heading — same display font, weight, and
     tracking — so the accent reads as one uniform white title. */
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--fr-ink);
}
.fr-case-hero__accent--script {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--fr-ink);
}
.fr-case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
}
.fr-case-hero__meta-label {
  display: block;
  font-family: var(--fr-font);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-ink-muted);
  margin-bottom: 0.35rem;
}
.fr-case-hero__meta-value {
  font-family: var(--fr-font);
  font-size: 1rem;
  color: var(--fr-ink);
}
.fr-case-hero__image {
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--fr-bg-soft);
  aspect-ratio: 16 / 9;
}
.fr-case-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Natural-aspect hero (e.g. Lumov banner) — show the full image
   without cropping to 16:9. */
.fr-case-hero__image--natural {
  aspect-ratio: auto;
}
.fr-case-hero__image--natural img {
  height: auto;
}
/* Full-bleed hero banner — spans the entire viewport width, edge to
   edge, with no rounded corners. Sits below the container'd title
   block. The top margin separates it from the meta row above. */
.fr-case-hero__image--full {
  width: 100%;
  margin-top: 4.5rem;
  /* Small side margin so the banner pulls in from the screen edges,
     matching the gallery below. */
  padding: 0 1.5rem;
}
.fr-case-hero__image--full img {
  width: 100%;
  border-radius: 1rem;
  vertical-align: top;
}

/* Extra breathing room under the "Project Gallery" heading before
   the full-bleed images begin. */
.fr-case-section--flush .fr-case-gallery__heading { margin-bottom: 4.5rem; }

/* Lumov-style gallery — real project images at their natural aspect
   ratios (no cropping), nearly full width with a small side margin
   so the rounded corners have room to breathe. A little spacing
   separates each image and each left/right pair. */
.fr-lumov-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 0 1.5rem;
}
.fr-lumov-gallery__full {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  /* Remove the tiny baseline gap inline images leave under them. */
  vertical-align: top;
}
.fr-lumov-gallery__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.fr-lumov-gallery__row--three {
  grid-template-columns: 1fr 1fr 1fr;
}
.fr-lumov-gallery__row--small-large {
  grid-template-columns: 1.5fr 2fr;
  align-items: stretch;
}
.fr-lumov-gallery__row--small-large img {
  width: 100%;
  height: 32rem;
  object-fit: contain;
  display: block;
}
.fr-lumov-gallery__row--small-large img:last-child {
  object-fit: cover;
}
.fr-lumov-gallery__row img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  vertical-align: top;
}

.fr-case-section {
  padding: 4rem 0;
  background: var(--fr-bg);
}
.fr-case-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rem;
}
.fr-case-overview__block h2 {
  font-family: var(--fr-display);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fr-ink);
  margin: 0 0 1rem;
}
.fr-case-overview__block p {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--fr-ink);
  margin: 0;
}
.fr-case-overview__block p + p { margin-top: 1.25rem; }

.fr-case-gallery__heading {
  font-family: var(--fr-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fr-ink);
  text-align: center;
  margin: 0 0 3rem;
}
/* "Gallery" word — pink, in the Pacifico script font, contrasting
   against the white "Project" lead in the regular display font. */
.fr-case-gallery__accent {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  letter-spacing: 0;
  color: #f2b8ff;
}
.fr-case-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.fr-case-gallery__item {
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--fr-bg-soft);
  aspect-ratio: 4 / 3;
}
.fr-case-gallery__item--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.fr-case-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fr-case-gallery__item:hover img { transform: scale(1.04); }

.fr-case-cta {
  padding: 4rem 0 8rem;
  background: var(--fr-bg);
}
.fr-case-cta__inner {
  background: var(--fr-bg-soft);
  border-radius: 22px;
  padding: 4rem 2.5rem;
  text-align: center;
}
.fr-case-cta__inner h2 {
  font-family: var(--fr-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fr-ink);
  margin: 0 0 1rem;
}
.fr-case-cta__inner p {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0 auto 2rem;
  max-width: 48ch;
}
.fr-case-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-family: var(--fr-font);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.fr-case-cta__btn:hover {
  background: #f2b8ff;
  border-color: #f2b8ff;
  transform: translateY(-1px);
}

/* --- COMING SOON (Nivaan placeholder page) --- */
.fr-coming-soon {
  padding: 6rem 0 10rem;
  background: var(--fr-bg);
}
.fr-coming-soon__inner {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}
.fr-coming-soon__title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #f2b8ff;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.fr-coming-soon__text {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0 auto 2.5rem;
  max-width: 48ch;
}
.fr-coming-soon__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-family: var(--fr-font);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.fr-coming-soon__btn:hover {
  background: #f2b8ff;
  border-color: #f2b8ff;
  transform: translateY(-1px);
}

/* --- REVIEWS PAGE --- */

/* Hero — centred headline mirroring the homepage testimonials heading,
   with a pink accent and a muted subtitle. */
.fr-reviews-hero {
  padding: 8rem 0 3rem;
  background: var(--fr-bg);
  text-align: center;
}
.fr-reviews-hero__heading {
  font-family: var(--fr-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fr-ink);
  margin: 0 auto;
  max-width: 22ch;
}
.fr-reviews-hero__accent { color: #f2b8ff; }

/* Pacifico — applied to every highlighted heading word across the
   site (pink and blue accents alike). The script font sits in
   visual contrast to the surrounding Geologica display type. The
   individual colour rules above stay intact — only the typeface
   changes here. */
.fr-reviews-hero__script,
.fr-about-hero__heading-accent,
.fr-about-journey__accent,
.fr-about-story__heading-accent,
.fr-why__highlight,
.fr-testimonials__accent,
.fr-faq__highlight,
.fr-blog__accent,
.fr-work-hero__accent,
.fr-work-related__accent {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  letter-spacing: 0;
}
.fr-reviews-hero__sub {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 1.5rem auto 0;
  max-width: 56ch;
}

/* Stats — three big-number credibility blocks sitting between the hero
   and the reviews grid. Numbers in pink, labels in white. */
.fr-reviews-stats {
  padding: 1rem 0 10rem;
  background: var(--fr-bg);
}
.fr-reviews-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.fr-reviews-stat {
  background: var(--fr-bg-soft);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-reviews-stat__number {
  font-family: var(--fr-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f2b8ff;
}
.fr-reviews-stat__label {
  font-family: var(--fr-font);
  font-size: 1rem;
  color: var(--fr-ink);
}

/* Carousel — one wide review card in view, prev/next arrows on the
   sides, and two faux "card edges" peeking below for the stack feel
   shown in the reference. Cards translate horizontally as the user
   clicks next/prev. */
.fr-reviews-slider {
  padding: 3rem 0 6rem;
  background: var(--fr-bg);
}
.fr-reviews-slider .fr-scroll-cue {
  /* Sit below the carousel with comfortable breathing room on
     both sides. */
  margin: 7rem auto 2rem;
}
.fr-slider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.fr-slider__viewport {
  position: relative;
  flex: 1;
  /* Viewport reserves the active card's height plus room BELOW for
     the bottom peek stack. The previously-active card scales down
     and fades out (no top stack), so no extra top padding is needed. */
  min-height: 30rem;
  padding-bottom: 7rem;
}
.fr-slider__track {
  position: relative;
  height: 100%;
}
/* All cards stack on top of each other at the same position. The class
   on each card (is-active / is-peek / is-peek-2) decides where it
   actually renders — at rest on top, slightly down behind, or further
   down behind that. Everything else is shifted off-screen above. */
.fr-slide {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--fr-bg-soft);
  border-radius: 22px;
  padding: 4rem 7.5rem;
  min-height: 28rem;
  /* The card establishes its own clipping context so the giant
     decorative quote mark below can't bleed outside the rounded
     edges. */
  overflow: hidden;
  /* Vertical stack: avatar on top, review body in the middle, name
     + designation at the bottom — with generous breathing room
     between each section. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.25rem;
  /* Default off-stage state: the previously-active card zooms WAY
     out (scale 0.6) and fades to fully transparent QUICKLY (faster
     opacity than transform), so it disappears almost immediately
     instead of lingering visible for the full transition length.
     The scale keeps animating in the background but the eye stops
     tracking it once opacity hits zero. */
  opacity: 0;
  transform: translateY(-8%) scale(0.6);
  pointer-events: none;
  z-index: 0;
  transition:
    transform 1.2s cubic-bezier(0.45, 0, 0.25, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 1, 1),
    background-color 1.2s cubic-bezier(0.45, 0, 0.25, 1),
    box-shadow 1.2s cubic-bezier(0.45, 0, 0.25, 1);
  will-change: transform, opacity;
}

/* Active card sits at the front with the brightest panel and a
   strong drop shadow that visually lifts it off the cards behind.
   Peek cards step down through progressively darker shades and
   lighter shadows so they read as receding into the deck. */
.fr-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 4;
  background: #232323;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.fr-slide.is-peek {
  opacity: 1;
  transform: translateY(32px) scale(0.96);
  z-index: 3;
  background: #1c1c1c;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
.fr-slide.is-peek-2 {
  opacity: 1;
  transform: translateY(64px) scale(0.92);
  z-index: 2;
  background: #181818;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.fr-slide.is-peek-3 {
  opacity: 1;
  transform: translateY(96px) scale(0.88);
  z-index: 1;
  background: #141414;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.fr-slide__avatar {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2b8ff 0%, #6f81e9 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fr-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-transform: uppercase;
  overflow: hidden;
}
.fr-slide__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.fr-slide__body p {
  margin: 0;
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fr-ink);
}
.fr-slide__person {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.fr-slide__person strong {
  font-family: var(--fr-font);
  font-size: 1rem;
  font-weight: 600;
  color: #f2b8ff;
}
.fr-slide__person span {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  color: var(--fr-ink-muted);
}

/* Prev / next chevrons — bare arrow icons, no circular background.
   Sit just outside the active card on either side. */
.fr-slider__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  color: var(--fr-ink);
  border: 0;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.fr-slider__nav:hover {
  color: #f2b8ff;
  transform: scale(1.1);
}
.fr-slider__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* CTA — pink-accent banner with a white pill button matching the
   contact page's submit button. */
.fr-reviews-cta {
  padding: 2rem 0 8rem;
  background: var(--fr-bg);
}
.fr-reviews-cta__inner {
  background: #6f81e9;
  border-radius: 22px;
  padding: 4rem 2.5rem;
  text-align: center;
}
.fr-reviews-cta__inner h2 {
  font-family: var(--fr-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fr-ink);
  margin: 0 0 1rem;
}
.fr-reviews-cta__inner p {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0 auto 2rem;
  max-width: 50ch;
}
.fr-reviews-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-family: var(--fr-font);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.fr-reviews-cta__btn:hover {
  background: #f2b8ff;
  border-color: #f2b8ff;
  transform: translateY(-1px);
}

/* --- CONTACT PAGE --- */

/* Centred page-title hero. The form section sits flush beneath with
   no separator so the heading reads as the title of the whole layout. */
.fr-contact-hero {
  padding: 8rem 0 3rem;
  background: var(--fr-bg);
  text-align: center;
}
.fr-contact-hero__heading {
  font-family: var(--fr-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fr-ink);
  margin: 0;
}

.fr-contact {
  padding: 2rem 0 7rem;
  background: var(--fr-bg);
}
.fr-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.85fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* Email card — left, narrower. Pink heading + icon, white body and link. */
.fr-contact__email {
  background: var(--fr-bg-soft);
  border-radius: 22px;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: start;
}
.fr-contact__email-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fr-ink);
}
.fr-contact__email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-contact__email-head h2 {
  font-family: var(--fr-font);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
  margin: 0;
}
.fr-contact__email-body {
  font-family: var(--fr-font);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0;
}
.fr-contact__email-link {
  font-family: var(--fr-font);
  font-size: 1.125rem;
  font-weight: 500;
  color: #f2b8ff;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.25s ease;
}
.fr-contact__email-link:hover { color: var(--fr-ink); }

/* Form card — right, wider. */
.fr-contact__form {
  background: var(--fr-bg-soft);
  border-radius: 22px;
  padding: 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fr-contact__form-title {
  font-family: var(--fr-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fr-ink);
  margin: 0 0 0.75rem;
}

/* Fields — label above input, dark input with hairline border. */
.fr-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-field label {
  font-family: var(--fr-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fr-ink);
}
.fr-field input,
.fr-field textarea,
.fr-field select {
  width: 100%;
  font-family: var(--fr-font);
  font-size: 0.9375rem;
  color: var(--fr-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fr-field input::placeholder,
.fr-field textarea::placeholder { color: var(--fr-ink-muted); }
.fr-field input:focus,
.fr-field textarea:focus,
.fr-field select:focus {
  outline: none;
  border-color: rgba(242, 184, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}
.fr-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

/* Side-by-side row for Email + Phone. */
.fr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Select with custom caret. */
.fr-field__select {
  position: relative;
}
.fr-field__select select { padding-right: 2.5rem; }
.fr-field__select select option { background: var(--fr-bg); color: var(--fr-ink); }
.fr-field__select-arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--fr-ink-muted);
  pointer-events: none;
}

/* Submit button — black pill with arrow, sits flush-left in the form. */
.fr-contact__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 0.8rem 1.4rem;
  font-family: var(--fr-font);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.fr-contact__submit:hover {
  background: #f2b8ff;
  border-color: #f2b8ff;
  color: #000;
  transform: translateY(-1px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .fr-work__grid { grid-template-columns: 1fr; }
  .fr-why__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fr-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .fr-blog__grid { grid-template-columns: 1fr; }
  .fr-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .fr-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .fr-service { gap: 2rem; }

  /* About page — collapse all multi-column rows so the editorial
     composition reads cleanly on narrow viewports. */
  .fr-about-hero { padding: 6rem 0 3rem; }
  .fr-about-hero__heading { margin-bottom: 2.5rem; }
  .fr-about-hero__gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1.25rem;
    max-width: 540px;
    margin: 0 auto;
  }
  .fr-about-hero__image {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .fr-about-pillars__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Journey — render the road map at mobile width so the curving
     SVG, dot, and milestones are visible. Stops stay absolutely
     positioned on the path (matching the desktop layout, just
     scaled down to fit the smaller viewport).

     `padding-bottom` adds a clear gap below the pinned road map so
     the next section ("Bringing Ideas to Life Through Design")
     doesn't enter the viewport while the road map is still pinned. */
  .fr-about-journey { padding: 5rem 0 12rem; }
  .fr-about-journey__sub { margin-bottom: 3rem; }

  .fr-about-story { padding: 18rem 0 5rem; }
  .fr-about-story__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Work / Portfolio — collapse rows and grid to single column. */
  .fr-work-hero { padding: 6rem 0 2rem; }
  .fr-work-feature { padding: 1.5rem 0; }
  .fr-work-feature__block { min-height: 28vh; padding: 1.75rem 1.5rem; }
  .fr-work-projects { padding: 1.5rem 0 3rem; }
  .fr-work-row--two { grid-template-columns: 1fr; gap: 1.25rem; }
  .fr-work-row { gap: 1.25rem; margin-bottom: 1.25rem; }
  .fr-work-card__meta { grid-template-columns: 1fr; gap: 0.75rem; }
  .fr-work-related { padding: 3rem 0; }
  .fr-work-related__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .fr-work-cta { padding: 1rem 0 5rem; }
  .fr-work-cta__inner { padding: 3rem 1.5rem; }

  /* Project case-study page — single column on narrow viewports. */
  .fr-case-hero { padding: 7rem 0 2rem; }
  .fr-case-hero__meta { gap: 1.5rem; }
  .fr-case-overview { grid-template-columns: 1fr; gap: 2.5rem; }
  .fr-case-gallery { grid-template-columns: 1fr; }
  .fr-case-gallery__item,
  .fr-case-gallery__item--wide { aspect-ratio: 4 / 3; }
  /* Lumov gallery — collapse the left/right pairs to a single column. */
  .fr-lumov-gallery__row { grid-template-columns: 1fr; }
  .fr-case-cta { padding: 3rem 0 5rem; }
  .fr-case-cta__inner { padding: 3rem 1.5rem; }

  /* Reviews — carousel and stats stack on narrow viewports. */
  .fr-reviews-hero { padding: 6rem 0 2rem; }
  .fr-reviews-slider { padding: 2rem 0 4rem; }
  .fr-slider { gap: 0.5rem; }
  .fr-slider__nav { padding: 0.35rem; }
  .fr-slide {
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    min-height: 0;
  }
  .fr-slide__avatar { width: 3.75rem; height: 3.75rem; }
  .fr-reviews-stats { padding: 0.5rem 0 2.5rem; }
  .fr-reviews-stats__grid { grid-template-columns: 1fr; gap: 1rem; }
  .fr-reviews-stat { padding: 2rem 1.5rem; }
  .fr-reviews-cta { padding: 1rem 0 5rem; }
  .fr-reviews-cta__inner { padding: 3rem 1.5rem; }

  /* Contact — stack the two cards, collapse Email + Phone to one column. */
  .fr-contact-hero { padding: 6rem 0 2rem; }
  .fr-contact { padding: 1.5rem 0 5rem; }
  .fr-contact__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .fr-field-row { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 720px) {
  .fr-nav__inner {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }
  .fr-nav__link { display: none; }
  .fr-nav__logo { font-size: 1rem; flex: 1; text-align: left; }
  .fr-nav__hamburger { display: flex; }
  .fr-hero { padding: 2rem 1.25rem 2rem; gap: 1.5rem; }
  .fr-hero__portrait { max-width: 420px; }
  .fr-hero__intro { font-size: 0.875rem; }
  .fr-scroll-cue { margin: 2.5rem auto 3rem; }
  .fr-service {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 2.5rem 0;
  }
  .fr-service--left .fr-service__title,
  .fr-service--right .fr-service__title {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    font-size: clamp(2.75rem, 13vw, 4rem);
  }
  .fr-service--left .fr-service__desc,
  .fr-service--right .fr-service__desc {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .fr-work__heading {
    font-size: clamp(3rem, 16vw, 5rem);
    /* Mobile: no scroll-pin / letter-fill animation. The heading
       sits in normal flow above the cards so the section feels
       like a regular scrollable list rather than a multi-viewport
       pinned experience. */
    position: static !important;
    top: auto !important;
    margin: 0 0 3rem !important;
  }
  /* Collapse the 400vh letter-fill spacer on mobile — no animation
     means no buffer scroll. */
  .fr-work__fill-spacer { height: 0 !important; }
  /* Cards scroll naturally — no sticky stacking on mobile. */
  .fr-work__item {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* Letters fully filled in by default — no scroll-driven snap. */
  .fr-outline-heading__outline .fr-letter {
    color: #f2b8ff !important;
    -webkit-text-stroke-color: #f2b8ff !important;
  }
  .fr-testimonials__grid { grid-template-columns: 1fr; }
  .fr-footer__cols { grid-template-columns: 1fr; }
  .fr-container { padding: 0 1.25rem; }
}