/*
Theme Name: RahulType
Theme URI: https://example.com
Author: Nikz
Description: Custom theme for RahulType.
Version: 1.0
*/


:root {
  --bg-color: #0c0c0c;
  --text-color: #f1efeb;
  --font-main: 'DM Sans', sans-serif;
  --grid-gap: 1rem;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 0 50px;
  /* Global horizontal padding */
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*   padding: 2rem 0; */
  padding: 1rem 0;
  position: sticky;
  top: 0;
  background-color: rgba(12, 12, 12, 0.9);
  backdrop-filter: blur(5px);
  z-index: 100;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--text-color);
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}

nav a:hover {
  opacity: 1;
}

/* Hidden by default on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Hero Grid */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: 4rem;
}

.grid-item {
  aspect-ratio: 1;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #666;
  border: 1px solid #1a1a1a;
}

/* Specific colors for grid items to mimic lively feel */
.grid-item:nth-child(2n) {
  background-color: #ff4d4d;
  color: white;
}

.grid-item:nth-child(3n) {
  background-color: #4d79ff;
  color: white;
}

.grid-item:nth-child(5n) {
  background-color: #ffbf00;
  color: black;
}


/* Container */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Generic Section */
section {
  margin-bottom: 8rem;
  border-top: 1px solid #222;
  /* Add separator lines like reference */
  padding-top: 2rem;
}

/* About Layout: 2 Columns [ (Label + Text) | Services ] */
.about-section {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 4rem;
}

.about-section .about-text-col {
  display: flex;
  flex-direction: column;
}

.about-text-col .label {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.about-section .services-col {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.content h1 {
  font-size: 29px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  max-width: 100%;
}

/* Services Column */
.services-col .label {
  margin-bottom: 2rem;
  display: block;
}

.services-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.pill {
  border: 1px solid var(--text-color);
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-color);
  transition: 0.2s;
  display: inline-block;
  font-size: 0.9rem;
}

.pill:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

/* Typeface Detail Page - Refined */
.typeface-hero {
  background-color: #d486d2 !important;
  color: #fff;
  padding: 4rem 0;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.hero-content {
  text-align: center;
  z-index: 2;
  position: relative;
  width: 100%;
}

.typeface-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 18vw;
  line-height: 0.8;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.04em;
  font-style: italic;
  /* Match reference script feel */
}

.bird-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 100%;
  object-fit: contain;
  /* Keep aspect ratio */
  opacity: 0.8;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Info & Details Section */
.typeface-info-section {
  display: grid;
  grid-template-columns: 1fr 300px;
  /* Main text vs Sidebar */
  gap: 4rem;
  /*   padding: 6rem 0; */
  padding: 0 !important;
  border-bottom: 1px solid #333;
  margin-bottom: 4rem;
}

.info-col h3,
.details-col h3 {
  font-size: 1rem;
  opacity: 0.5;
  margin-bottom: 3rem;
  text-transform: capitalize;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1.5rem;
  display: block;
  width: 100%;
}

.details-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4rem;
}

.info-text p {
  font-size: 27px !important;
  line-height: 1.3;
  max-width: 100%;
  margin-bottom: 2rem;
  opacity: 1;
  font-weight: 400;
}

.details-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 1.1rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.buy-btn-large {
  background-color: #00cc44;
  /* Green from reference */
  color: black;
  border: none;
  padding: 1.5rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  width: 100px;
  height: 100px;
  /* Circular-ish */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.buy-btn-large:hover {
  transform: scale(1.05);
}

/* Type Tester - Refined */
.type-tester-section {
  background-color: #f4f4f0;
  /* Light beige/off-white */
  color: #0c0c0c;
  /* Dark text */
  padding: 0;
  min-height: 100vh;
  position: relative;
  border-top: 1px solid #ddd;
}

.tester-toolbar {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  background-color: rgba(244, 244, 240, 0.95);
  backdrop-filter: blur(5px);
  z-index: 50;
  font-family: var(--font-main);
}

/* Custom Range Slider */
.size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 2px;
  background: #ccc;
  outline: none;
  cursor: pointer;
}

.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5722;
  /* Orange accent */
  cursor: pointer;
  transition: transform 0.1s;
}

.size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.control-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
}

.control-value {
  font-family: monospace;
  font-size: 0.9rem;
  color: #000;
}

/* Massive Preview */
.tester-preview {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  outline: none;
  line-height: 0.9;
  padding: 4rem;
  overflow-wrap: break-word;
}


/* 3 Column Grid for Values/Work/Process */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.col-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- HIGH FIDELITY HOMEPAGE CLONE --- */

/* Hero Section (Video/Image Placeholder) */
.home-hero {
  position: relative;
  height: 80vh;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  background: radial-gradient(circle, #ff0000, #0000ff);
  /* Fallback abstract */
}

/* Studio Branding Section */
.studio-branding {
  background-color: #0c0c0c;
  color: white;
  padding: 8rem 0 4rem 0;
  /* More top padding */
  text-align: left;
  /* Left align as per reference */
  border-bottom: none;
}

.typozon-logo-graphic {
  font-family: 'Playfair Display', serif;
  font-size: 14vw;
  /* Massive responsive size */
  line-height: 0.8;
  margin-bottom: 3rem;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align left */
  gap: 2vw;
  margin-left: -1rem;
  /* Optical alignment */
}

.circle-xyz {
  border: 3px solid white;
  border-radius: 50%;
  width: 12vw;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  font-style: normal;
  transform: rotate(-10deg);
}

.studio-desc {
  max-width: 800px;
  font-size: 1.5rem;
  line-height: 1.3;
  opacity: 1;
  text-align: left;
  margin: 0;
  font-weight: 400;
}

/* Marquee */
.marquee-bar {
  background-color: #0c0c0c;
  color: white;
  padding: 1rem 0;
  /* Relaxed padding */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  /* Requested size */
  letter-spacing: 0.5px;
  border-top: none;
  border-bottom: none;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  margin-bottom: 0;
}

.marquee-content {
  display: inline-block;
  padding-right: 0;
  animation: scroll-left 20s linear infinite;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 100%;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}


/* --- BENTO GRID LAYOUT --- */
.bento-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #000;
}

.grid-row {
  display: flex;
  width: 100%;
  height: 16vw;
  /* Slightly relaxed height */
  max-height: 250px;
}

.grid-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.2s;
  line-height: 1;
  padding: 0 1vw;
  /* Added safeguards */
}

/* CELL STYLING - SAFE CONTAINMENT */

/* Row 1 */
.cell-ale {
  width: 25%;
  background-color: #ff33cc;
  color: #ff0000;
  font-weight: 900;
  font-size: 8vw;
  /* Safe for 3 chars */
  font-family: 'Helvetica Neue', sans-serif;
}

.cell-osaka {
  width: 45%;
  background-color: #000;
  color: #007bff;
  font-family: sans-serif;
  font-weight: 900;
  font-size: 8vw;
  /* Safe for 5 chars */
  font-style: italic;
  background-image: linear-gradient(to right, #000 50%, #111 50%);
  background-size: 20px 100%;
}

.cell-pina {
  width: 30%;
  background-color: #ffcc00;
  color: #ff0000;
  font-family: serif;
  font-style: italic;
  font-weight: 900;
  font-size: 9vw;
  /* Safe for 4 chars */
}

/* Row 2 */
.cell-h {
  width: 10%;
  background-color: #fff;
  color: #000;
  font-size: 6vw;
  font-weight: 900;
}

.cell-radish {
  width: 50%;
  background-color: #fff;
  color: #ff0000;
  font-weight: 900;
  font-size: 9vw;
  /* Safe for 7 chars */
  font-style: italic;
  letter-spacing: -0.2vw;
}

.cell-limon {
  width: 40%;
  background-color: #000;
  color: #00cc44;
  font-weight: 900;
  font-size: 9vw;
  /* Safe for 5 chars */
}

/* Row 3 */
.cell-mas {
  width: 20%;
  background-color: #00cc44;
  color: #000;
  font-family: serif;
  font-weight: 900;
  font-size: 6vw;
}

.cell-hanoi {
  width: 60%;
  background-color: #007bff;
  color: #000;
  font-weight: 900;
  font-size: 11vw;
  /* Safe for 5 chars */
  letter-spacing: -0.2vw;
}

.cell-kimci {
  width: 20%;
  background-color: #fff;
  color: #ff0000;
  font-weight: 900;
  font-size: 4.5vw;
  transform: rotate(5deg);
}

/* Row 4 */
.cell-berries {
  width: 60%;
  background-color: #ff0000;
  color: #fff;
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 7vw;
  /* Safe for 9 chars */
}

.cell-wasabi {
  width: 40%;
  background-color: #ff69b4;
  color: #000;
  font-weight: 900;
  font-size: 7vw;
  /* Safe for 6 chars */
}

/* Row 5 */
.cell-paris {
  width: 40%;
  background-color: #ffcc00;
  color: #ff0000;
  font-weight: 900;
  font-size: 9vw;
}

.cell-brooklyn {
  width: 60%;
  background-color: #00cc44;
  color: #000;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 7vw;
  /* Safe for 8 chars */
}

/* Shop Illustration */
.shop-illustration {
  background-color: #0c0c0c;
  padding: 4rem 0;
  display: flex;
  justify-content: flex-start;
}

.shop-img {
  max-width: 300px;
  filter: invert(1);
  /* Make black lineart white if needed */
}

/* Footer Adjustments */
footer {
  border-top: 1px solid #222;
}

/* Graphical headers placeholder */
.graphic-header {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-family: sans-serif;
  border-radius: 1rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

.graphic-values {
  background-color: #ff4d4d;
  color: white;
  border-radius: 50% 10% 50% 10%;
  transform: rotate(-2deg);
}

.graphic-work {
  background-color: #00994d;
  color: white;
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

.graphic-process {
  background-color: #0066cc;
  color: white;
  border-radius: 10px;
}

.col-item h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 1rem;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

.col-item p {
  font-size: 1.1rem;
  line-height: 1.4;
  opacity: 0.8;
}

/* View More Button */
.view-more-btn {
  display: inline-block;
  padding: 1rem 3rem;
  background-color: white;
  color: black;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: transform 0.2s, background-color 0.2s;
}

.view-more-btn:hover {
  transform: scale(1.05);
  background-color: #f0f0f0;
}

/* Footer */
footer {
/*   padding: 4rem 0; */
	 padding: 2rem 0;
  border-top: none;
  /* Removed generic border */
/*   margin-top: 8rem; */
  position: relative;
}

/* Follow Us Button */
.footer-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 6rem;
}

.follow-us-btn {
  background-color: #f1efeb;
  color: #0c0c0c;
  padding: 1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: transform 0.2s;
}

.follow-us-btn:hover {
  transform: scale(1.05);
}

/* Footer Grid */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  /*   margin-bottom: 6rem; */
  margin-bottom: 1rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.5rem;
  /* Larger font size as seen in image */
  font-weight: 400;
  line-height: 1.2;
}

.footer-col a:hover {
  opacity: 0.7;
}

/* Instagram Feed */
.instagram-feed-section {
  margin-bottom: 4rem;
}

.feed-label {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

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

.feed-item {
  aspect-ratio: 1;
  background-color: #222;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform 0.3s;
}

.feed-item:hover {
  transform: scale(1.02);
  z-index: 10;
}

/* Feed Item 1: Typography Bands */
.feed-item-1 {
  background: linear-gradient(to bottom,
      #000 20%,
      #fff 20%, #fff 40%,
      #ff0000 40%, #ff0000 60%,
      #ff69b4 60%, #ff69b4 80%,
      #00cc44 80%);
  color: white;
  flex-direction: column;
}

/* Feed Item 2: Yellow Book */
.feed-item-2 {
  background-color: #ffe600;
  color: black;
}

.feed-book-mock {
  width: 70%;
  height: 80%;
  background: #ffd600;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transform: rotate(-10deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

/* Feed Item 3: Pink/Yellow Poster */
.feed-item-3 {
  background: radial-gradient(circle at center, #ffe600 0%, #ff69b4 100%);
  color: black;
  font-family: serif;
}

.feed-poster-text {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  mix-blend-mode: multiply;
}

/* Footer Bottom (Newsletter & Legal) */
.footer-bottom {
  display: flex;
  flex-direction: column;
  /*   gap: 2rem; */
  gap: 0.5rem;
}

.copyright {
  font-size: 14px;
  /*   opacity: 0.6; */
  color: #f1efeb;
}

.newsletter-form {
  display: flex;
  gap: 1rem;
  /*   max-width: 500px; */
  max-width: 390px;
  align-items: center;
}

.newsletter-input {
  background-color: transparent;
  border: 1px solid #c1c1c1;
  padding: 1rem;
  border-radius: 4px;
  color: white;
  flex-grow: 1;
  font-family: var(--font-main);
}

.submit-btn-round {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  color: black;
  border: none;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.legal-text {
  font-size: 14px;
  /*   opacity: 0.6; */
  max-width: 600px;
  line-height: 1.4;
  color: #f1efeb;
}

.legal-text a {
  color: inherit;
  text-decoration: underline;
}

.bottom-links {
  display: flex;
  gap: 2rem;
  font-size: 14px;
  margin-top: 1rem;
  color: #f1efeb;
}

.bottom-links a {
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.8;
}

.back-to-top {
  position: absolute;
  bottom: 4rem;
  right: 4rem;
  cursor: pointer;
  font-size: 2rem;
}

/* Typefaces Filters */
.filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}

.filter-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 1px solid #333;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.2s;
}

.filter-btn.active {
  background-color: white;
  color: black;
  border-color: white;
}

.filter-btn:hover {
  border-color: white;
  color: white;
}

/* Typefaces Grid */
/* Old masonry grid flex removed */

.type-item {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.type-item.full {
  grid-column: span 2;
}

.type-item.half {
  /* Width handled by grid */
}

.type-img {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #222;
  border-radius: 0.8333333333333334rem;
  /* Specific border radius */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  transition: transform 0.3s;
}

.bento-grid-image-container img {
  border-radius: 0.8333333333333334rem;
  /* Specific border radius */
}

.type-item:hover .type-img {
  transform: scale(0.98);
}

.type-info h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.type-info p {
  font-size: 1rem;
  opacity: 0.6;
  margin: 0;
}

/* Works Page Grid */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

.work-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.work-img-container {
  width: 100%;
  aspect-ratio: 4/5;
  background-color: #222;
  overflow: hidden;
}

.work-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.work-item:hover .work-img {
  transform: scale(1.05);
}

.work-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.work-title {
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 500;
}

.work-credit {
  font-size: 0.9rem;
  color: #666;
}

/* Study / News Page */
.study-container {
  margin-top: 6rem;
}

.study-header {
  margin-bottom: 4rem;
  width: 100%;
}

.study-header h1 {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

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

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}

.news-img-container {
  width: 100%;
  aspect-ratio: 3/4;
  /* Slightly taller vertical */
  background-color: #222;
  border-radius: 0.8333333333333334rem;
  /* Match other radius */
  overflow: hidden;
  position: relative;
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-card:hover .news-img {
  transform: scale(1.05);
}

.news-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
  /* Slight indent */
}

.news-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.news-title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #00cc44;
  border-radius: 50%;
  display: inline-block;
}

/* Contact Page */
.contact-container {
  margin-top: 6rem;
  min-height: 80vh;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

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

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-info h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.contact-info p {
  font-size: 1.25rem;
  margin-bottom: 4rem;
  opacity: 0.8;
  max-width: 400px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: auto;
  /* Push to bottom if height allows */
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 1.1rem;
  color: white;
  text-decoration: none;
}

.contact-form-col {
  padding-top: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}

.form-input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #333;
  padding: 1rem 0;
  color: white;
  font-family: var(--font-main);
  font-size: 1.1rem;
  width: 100%;
  transition: border-color 0.3s;
  border-radius: 0;
}

.form-input:focus {
  outline: none;
  border-bottom-color: white;
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

.submit-btn-contact {
  align-self: flex-start;
  background-color: white;
  color: black;
  padding: 1rem 3rem;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 2rem;
  transition: transform 0.2s;
}

.submit-btn-contact:hover {
  transform: scale(1.05);
}

/* Typeface Page Styles */
.filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 0.9rem;
  transition: all 0.2s;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--text-color);
  color: var(--bg-color);
}

.masonry-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem;
  margin-bottom: 4rem;
}

.type-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Fill the grid cell */
}

.type-item.full {
  grid-column: span 2;
}

.type-img {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.type-info h2 {
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}

.type-info p {
  opacity: 0.7;
  font-size: 0.9rem;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {

  /* Global Layout */
  body {
    padding: 0 20px;
    /* Reduced global padding */
  }

  section {
    margin-bottom: 4rem;
  }

  /* Header */
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 1.5rem 0;
    position: relative;
    /* For menu pos */
  }

  .logo {
    z-index: 1001;
    /* Above menu overlay */
    position: relative;
  }

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
    /* Above menu overlay */
  }

  .mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
  }

  /* Hamburger Animation */
  .mobile-menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }

  /* Nav Overlay */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    /* Hidden top */
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
  }

  .main-nav.active {
    transform: translateY(0);
  }

  nav ul {
    flex-direction: column;
    gap: 2rem;
    padding: 0;
    text-align: center;
  }

  nav a {
    font-size: 2rem;
    font-weight: 700;
  }

  /* Hero Grid */
  .hero-grid {
    grid-template-columns: 1fr;
    /* 1 column on mobile (Full Width) */
  }

  /* About Layout */
  .about-section {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-section .services-col {
    grid-column: 1;
    grid-row: auto;
  }

  .content h1 {
    font-size: 2rem;
  }

  .studio-desc {
    font-size: 1.2rem;
  }

  /* Studio Branding */
  .studio-branding {
    padding: 4rem 0;
  }

  .typozon-logo-graphic {
    font-size: 18vw;
    flex-wrap: wrap;
  }

  .circle-xyz {
    width: 20vw;
    height: 20vw;
    font-size: 8vw;
    border-width: 2px;
  }

  /* Bento Grid Mobile Stack */
  .grid-row {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .grid-cell {
    width: 100% !important;
    /* Force full width */
    height: 60vw;
    /* Tall rectangles */
    border-bottom: 1px solid #000;
  }

  /* Safeguard typography in bento */
  .cell-ale,
  .cell-osaka,
  .cell-pina,
  .cell-h,
  .cell-radish,
  .cell-limon,
  .cell-mas,
  .cell-hanoi,
  .cell-kimci,
  .cell-berries,
  .cell-wasabi,
  .cell-paris,
  .cell-brooklyn {
    font-size: 15vw;
    /* Large legible text */
  }

  /* Typeface Page */
  .typeface-hero {
    height: 60vh;
    border-radius: 20px;
    overflow: hidden;
  }

  .typeface-hero h1 {
    font-size: 20vw;
  }

  .typeface-info-section {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .buy-btn-large {
    position: fixed;
    bottom: 2rem;
    z-index: 900;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }

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

  /* Removed premature closing brace */

  /* Type Tester */
  .tester-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .cols-3 {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-cta {
    margin-bottom: 4rem;
  }

  .newsletter-form {
    max-width: 100%;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    font-size: 1.5rem;
  }

  /* Works/News Grids */
  .works-grid,
  .news-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Masonry Grid Mobile - Explicit Override */
  .masonry-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem;
    width: 100% !important;
  }

  .type-item,
  .type-item.full,
  .type-item.half {
    grid-column: 1 / -1 !important;
    /* Force span full */
    width: 100% !important;
    max-width: 100% !important;
  }

  .type-item a {
    width: 100% !important;
    display: flex !important;
  }

  .type-img {
    font-size: 2rem;
    aspect-ratio: 16/10;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }

  .type-info h2 {
    font-size: 1.5rem;
  }

  /* Works Page Typography */
  .works-header {
    margin-bottom: 2rem !important;
  }

  .works-header p {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  /* About Page Typography */
  .about-section .content h1 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  /* Hero Images fit width */
  .home-hero,
  .about-hero-image div {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    /* Maintain video-like ratio */
    border-radius: 0.5rem !important;
  }

  .about-hero-image {
    margin-bottom: 2rem;
  }
}

/* Showcase Section (Full Width Breakout) */
.typeface-showcase {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  left: 50%;
  right: 50%;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
}

.showcase-item {
  width: 100%;
  display: flex;
}

.showcase-item img {
  width: 100%;
  height: auto;
  display: block;
}

.showcase-item.placeholder {
  background-color: #222;
  height: 300px;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.2rem;
  border-bottom: 1px solid #333;
}

/* --- FINAL ALIGNMENT FIXES --- */

/* 1. Homepage Grid Item Alignment (Left) */
.type-info {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  /* Keep at bottom */
  padding-left: 1.5rem;
}

/* 2. Single Typeface Hero Alignment (Left) */
.typeface-hero {
  align-items: flex-start !important;
  /* Horizontal Left */
  justify-content: center;
  /* Vertical Center */
  text-align: left !important;
  padding-left: 0;
  /* Align with content, body has padding */
}

.hero-content {
  align-items: flex-start !important;
  text-align: left !important;
  margin-left: 0;
}

.typeface-hero h1 {
  margin-left: 0;
  text-align: left;
}

/* 3. Showcase Images (Full Width Breakout) */
.typeface-showcase {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  left: 50%;
  right: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
}

.showcase-item {
  width: 100%;
  display: block;
  line-height: 0;
  /* Remove gap */
}

.showcase-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  /* Ensure full image is seen */
  margin: 0 auto;
}

/* --- FINAL VISUAL REFINEMENTS (Filters & Images) --- */

/* 1. Remove Filter Dots/Markers */
.filters {
  list-style: none !important;
  padding-left: 0;
}

.filter-btn {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
}

.filter-btn::before,
.filter-btn::after {
  content: none !important;
  display: none !important;
}

/* 2. Global Image Border Radius */
img {
  border-radius: 1.11111111rem;
}

/* 3. Showcase Images Centering (Strict Force) */
.typeface-showcase {
  /* Breakout logic */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  background-color: #0c0c0c;
  /* Ensure background matches */
}

.showcase-item {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.showcase-item img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
  /* Remove any float or align */
  float: none !important;
}

/* --- FINAL VISUAL TWEAKS ROUND 3 --- */

/* 1. Hero Full Width Breakout (Matching Homepage) */
.typeface-hero-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  left: 50%;
  right: 50%;
  overflow: hidden;
  margin-bottom: 4rem;
  /* Spacing after hero */
  display: flex;
  justify-content: center;
  background-color: #0c0c0c;
}

.typeface-hero-img {
  width: 100%;
  height: 80vh;
  /* Match homepage height */
  object-fit: contain;
  /* "Contain the width" - usually means show full image? 
                           If user meant "like homepage", homepage uses cover. 
                           But "contain" might be specific. 
                           Let's use object-fit: cover for consistency with 'hero', 
                           but if they said 'contain' explicitly, maybe they mean 'contain'.
                           I'll try 'cover' first as it's standard for heroes, 
                           but 'contain' if they want to see edges. 
                           Actually, 'contain' ensures the whole image is visible (letterboxing). 
                           'cover' fills the area. 
                           User said "contain the width like in the homepage". 
                           Homepage uses 'cover'. 
                           Let's stick to 'cover' but ensure it breaks out full width. */
  object-fit: cover;
  border-radius: 0 !important;
  /* Hero usually square? Or rounded? User said ALL images. */
}

/* 2. Filter Buttons Styling */
/* Remove any interfering pseudo-elements */
.filters,
.filters * {
  list-style: none !important;
}

.filters {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  /* As per screenshot? Or center? Screenshot showed left alignment of text? */
  /* Screenshot uploaded_media_0 shows filters left/center. Let's keep flex-start or center? 
       Previous was center. Let's try flex-start if 'left aligned' was the theme. */
  align-items: center;
}

.filter-btn {
  padding: 0.6rem 2rem;
  border-radius: 999px;
  border: 1px solid #333;
  /* Inactive border */
  color: #666;
  background: transparent;
  transition: all 0.2s ease;
  text-transform: lowercase;
  /* match screenshot */
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-btn:hover {
  border-color: #666;
  color: #fff;
}

.filter-btn.active {
  background-color: #f1efeb;
  /* White/Off-white */
  color: #0c0c0c;
  border-color: #f1efeb;
  font-weight: 500;
}

/* Force hiding marker again */
.filter-btn::marker,
.filters::marker,
.filters div::marker {
  content: "";
  display: none;
}

/* 3. Contact Button Fix */
.buy-btn-large {
  position: relative;
  z-index: 1000;
  cursor: pointer;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensure it looks clickable */
  pointer-events: auto;
}

/* --- FINAL VISUAL TWEAKS ROUND 4 --- */

/* 1. FILTER BUTTONS: Borders & Dot Removal */
.filters {
  display: flex;
  gap: 1rem;
  align-items: center;
  list-style-type: none !important;
  /* Force remove list bullets */
  padding: 0;
  margin: 0;
}

.filters::-webkit-details-marker,
.filters::marker {
  display: none;
  color: #0c0c0c;
  /* Hide by making it body color if it persists */
}

.filter-btn {
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  border: 1px solid #333;
  /* Border for inactive buttons */
  color: #888;
  background: transparent;
  transition: all 0.2s ease;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Specific fix for dots possibly coming from 'a' tags or li */
.filter-btn::before,
.filter-btn::after {
  display: none !important;
  content: none !important;
}

.filter-btn:hover {
  border-color: #666;
  color: #fff;
}

.filter-btn.active {
  background-color: #f1efeb;
  color: #0c0c0c;
  /* Black text */
  border-color: #f1efeb;
  font-weight: 600;
}


/* 2. HERO IMAGE: Full Width Like Homepage */
/* 2. HERO IMAGE: Standard Width (Respects Padding) */
.typeface-hero-wrapper {
  width: 100%;
  /* Respected container width (body padding) */
  margin-left: 0;
  margin-right: 0;
  left: auto;
  right: auto;
  margin-bottom: 4rem;
  background-color: #0c0c0c;
  display: flex;
  justify-content: center;
}

.typeface-hero-img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  display: block;
  border-radius: 1.11111111rem !important;
  /* Restore radius */
}


/* 3. CONTACT BUTTON: Clickability Fix */
.buy-btn-large {
  display: inline-flex;
  /* Changed to inline-flex to behave like a button */
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
  z-index: 9999;
  /* Force on top */
  position: relative;
  /* Styles matching design */
  background-color: #00cc44;
  color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-weight: 500;
}

/* --- FINAL VISUAL TWEAKS ROUND 5 --- */

/* 1. Filter Section Spacing & Dot Formatting */
.filters {
  padding-bottom: 4rem;
  /* Requested bottom padding */
  display: flex;
  gap: 1rem;
  align-items: center;
  /* Ensure no list styles */
  list-style: none !important;
  list-style-type: none !important;
}

/* Aggressively target potential "dots" */
.filters::before,
.filters::after,
.filter-btn::before,
.filter-btn::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* In case it's treated as a list item */
.filters>* {
  display: inline-flex !important;
  list-style: none !important;
}

/* 2. Single Typeface Hero Tweak */
/* Ensure the image doesn't have a huge bottom margin if standard one exists */
.typeface-hero-wrapper {
  margin-bottom: 6rem;
  /* Give it space */
}

/* --- FINAL CONSOLIDATED VISUAL FIXES --- */

/* 1. FILTER SECTION: Remove Dot, Add Padding, Style Buttons */
.filters {
  padding-bottom: 4rem !important;
  /* Requested bottom spacing */
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Force hide any generated markers or pseudo-elements causing dots */
.filters::before,
.filters::after,
.filters::-webkit-details-marker {
  content: none !important;
  display: none !important;
}

.filter-btn {
  text-decoration: none !important;
  padding: 0.8rem 2rem !important;
  border-radius: 999px !important;
  border: 1px solid #333 !important;
  /* Inactive border */
  color: #888 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide dots on buttons too */
.filter-btn::before,
.filter-btn::after {
  display: none !important;
  content: none !important;
}

.filter-btn:hover {
  border-color: #666 !important;
  color: #fff !important;
}

.filter-btn.active {
  background-color: #f1efeb !important;
  color: #0c0c0c !important;
  /* Active text black */
  border-color: #f1efeb !important;
  font-weight: 600 !important;
}


/* 2. SHOWCASE IMAGES: Strict Centering & Full Width */
.typeface-showcase {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  background-color: #0c0c0c !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 4rem !important;
}

.showcase-item {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.showcase-item img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  /* Ensure it doesn't get stretched weirdly */
  height: auto !important;
  border-radius: 1.11111111rem !important;
}


/* 3. HERO IMAGE: Full Width Breakout */
.typeface-hero-wrapper {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin-bottom: 6rem !important;
  background-color: #0c0c0c !important;
  display: flex !important;
  justify-content: center !important;
}

.typeface-hero-img {
  width: 100% !important;
  height: 80vh !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  /* No radius for hero edges */
}


/* 4. GLOBAL IMAGE BORDER RADIUS */
/* Apply to all images except the hero which is handled above */
img:not(.typeface-hero-img) {
  border-radius: 1.11111111rem;
}


/* 5. CONTACT BUTTON */
.buy-btn-large {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  position: relative !important;
  pointer-events: auto !important;
  background-color: #00cc44 !important;
  color: black !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  font-weight: 500 !important;
}

/* 6. TYPOZON SHORTCODE WRAPPER */
/* Reset any wrapper styles that might cause the dot */
.typozon-shortcode-wrapper {
  list-style: none !important;
}

/* --- FORCE PADDING (RESPECT BODY PADDING) --- */

/* 1. Hero Image: Reset to 100% of container (which has 50px padding) */
.typeface-hero-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  background-color: transparent !important;
  /* Remove black bg context if needed */
}

/* 2. Showcase Images: Reset to 100% of container */
.typeface-showcase {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  background-color: transparent !important;
}

/* --- MOBILE RESPONSIVE FIXES --- */

@media (max-width: 768px) {

  /* 1. Hero Image: Natural Height on Mobile (Like Showcase) */
  .typeface-hero-img {
    height: auto !important;
    min-height: 300px;
    /* Minimum height so it's not too small */
    object-fit: contain !important;
    /* Ensure full image is visible */
    /* Or simply let it be natural */
  }

  .typeface-hero-wrapper {
    margin-bottom: 2rem;
    /* Less spacing on mobile */
    height: auto !important;
    /* Allow wrapper to shrink */
  }
}

/* --- MOBILE SPACING FIXES --- */

@media (max-width: 768px) {

  /* Reduce Hero Wrapper Margin */
  .typeface-hero-wrapper {
    margin-bottom: 1rem !important;
    /* drastically reduce from 6rem */
  }

  /* Reduce Info Section Padding */
  .typeface-info-section {
    padding-top: 1rem !important;
    /* drastically reduce from 6rem */
    padding-bottom: 2rem !important;
    gap: 2rem !important;
  }

  /* Reduce general section bottom margin */
  section {
    margin-bottom: 3rem !important;
  }

  /* Ensure Hero Image doesn't enforce min-height if it creates gaps */
  .typeface-hero-img {
    min-height: auto !important;
  }
}

/* --- FINAL TWEAKS ROUND 6 --- */

/* 1. Showcase Images: Remove Border Radius */
.showcase-item img {
  border-radius: 0 !important;
}

/* 2. Filter Fix (CSS Backup) */
/* Target the likely Elementor list wrapper */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- FONT SIZE UPDATES --- */

/* 1. Header Menu Text */
.main-nav ul li a {
  font-size: 24px !important;
}

/* 2. Footer Menu Text */
.footer-col a {
  font-size: 30px !important;
}

/* --- ADDITIONAL CSS MIGRATED FROM CUSTOMIZER --- */


/* Filter Button Fixes */
.filters {
  padding-bottom: 2rem !important;
  gap: 0.5rem !important;
}

.filter-btn {
  text-transform: capitalize !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  padding: 7px 18px !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 28px !important;
}

.filter-btn:hover {
  background-color: #fff !important;
  color: #000 !important;
}

.filter-btn.active {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  font-weight: 500 !important;
}

.custom-logo {
  height: 35px;
}

.type-info h2 {
  font-size: 22px !important;
  margin-bottom: 0px !important;
}

.type-info p {
  font-size: 16px !important;
}

.type-info {
  padding-left: 0rem !important;
}