General text block
.text-block { padding: 60px 0; }
.text-block__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 18px 0; }
.text-block__body { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 1500px; }
.text-block__body p { margin: 0 0 16px 0; }

/* Tighter vertical rhythm for the copy section on this page */
#landing-module-new > .text-block {
  padding: 40px 0;
  margin: clamp(24px, 4vw, 60px) 0;
}
@media (max-width: 760px) {
  #landing-module-new > .text-block { padding: 28px 0; margin: 24px 0; }
}

/* Services */
.services { padding: 60px 0; }
.services__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 20px 0; }
.services__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.services__col { color: var(--muted); font-size: 16px; line-height: 1.7; }
.services__list p { margin: 0 0 12px 0; color: var(--text); font-weight: 500; }
.services__bullets { margin: 0; padding-left: 18px; }
.services__bullets li { margin: 8px 0; font-weight: 600; color: var(--text); }
@media (min-width: 900px) {
  .services__grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  /* Ensure right columns don't get extra top offset from first paragraph */
  .services__col p:first-child { margin-top: 0; }
}

/* Page-specific spacing so services breathe between adjacent sections */
#landing-module-new > .services {
  margin: clamp(32px, 5vw, 80px) 0;
}
@media (min-width: 900px) {
  #landing-module-new > .services {
    margin: clamp(48px, 6vw, 120px) 0;
  }
}

/* Tighter mobile spacing for better text flow on this page only */
@media (max-width: 760px) {
  #landing-module-new > .services { padding: 30px 0; margin: 28px 0; }
  #landing-module-new .services__grid { gap: 12px; }
  #landing-module-new .services__list p { margin: 0 0 8px 0; }
  #landing-module-new .services__bullets { margin: 0 0 8px 16px; padding-left: 16px; }
  #landing-module-new .services__bullets li { margin: 6px 0; }
  #landing-module-new .services__col { line-height: 1.6; }
  /* Reduce default paragraph margins for better flow */
  #landing-module-new .services__col p { margin: 0 0 10px 0; }
  #landing-module-new .services__col p:last-child { margin-bottom: 0; }
}


#landing-module-new {
  display: block !important;

}


/* .landing-reveal { 
  display: block !important; 
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
} */

/* Base setup */
:root {
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Urbanist", var(--font-sans);
  --text: #111;
  --muted: #444;
  --bg: #fff;
  --maxw: 1200px;
  --gutter: 50px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: none;
  padding: 0 var(--gutter);
  margin: 0 auto;
}

/* Mobile: tighter side margins */
@media (max-width: 760px) {
  .container { padding: 0 5%; }
}

/* Constrain text sections to 1500px, keep galleries full-bleed */
.hero > .container,
.text-block > .container,
.services > .container,
.faq > .container,
.client-section > .container,
.contact > .container {
  max-width: 1500px;
}

/* Hero */
.hero {
  padding: clamp(48px, 8vw, 120px) 0 40px;
}

/* Add extra breathing room before the first gallery on this page */
#landing-module-new > .hero { margin-bottom: clamp(48px, 7vw, 120px); }
@media (max-width: 760px) {
  #landing-module-new > .hero { margin-bottom: 44px; }
}

.hero__title {
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(40px, 8vw, 104px);
  margin: 0 0 28px 0;
}

.hero__tagline {
  max-width: 70ch;
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
  margin: 0 0 28px 0;
}

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

.contact__link {
  width: fit-content;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: clamp(18px, 2.1vw, 24px);
}

/* Remove underline on hero contact links for this page */
#landing-module-new .contact__link { text-decoration: none; }

@media (min-width: 720px) {
  .hero__contact { flex-direction: column; gap: 16px; }
}

/* Gallery */
.gallery { padding: 16px 0 24px; --tile-height: 520px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}
.tile { margin: 0; }
.tile img {
  display: block;
  width: 100%;
  height: var(--tile-height, 520px); /* consistent height across tiles */
  object-fit: cover;
}

/* Image focal-point utilities (apply to img) */
.focus-center { object-position: 50% 50%; }
.focus-top { object-position: 50% 0%; }
.focus-bottom { object-position: 50% 100%; }
.focus-left { object-position: 0% 50%; }
.focus-right { object-position: 100% 50%; }
.focus-top-left { object-position: 0% 0%; }
.focus-top-right { object-position: 100% 0%; }
.focus-bottom-left { object-position: 0% 100%; }
.focus-bottom-right { object-position: 100% 100%; }
/* Precise control via CSS variables: set --focus-x / --focus-y on the element */
.focus-custom { object-position: var(--focus-x, 50%) var(--focus-y, 50%); }

/* column spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Responsive row heights */
@media (max-width: 760px) { .gallery { --tile-height: 400px; } }
@media (min-width: 1280px) { .gallery { --tile-height: 640px; } }
@media (min-width: 1600px) { .gallery { --tile-height: 720px; } }
@media (min-width: 1920px) { .gallery { --tile-height: 840px; } }

/* On small screens, let gallery images size to natural height to avoid cropping */
@media (max-width: 768px) {
  .gallery .tile img { height: auto; object-fit: contain; }
}

/* Masonry gallery (bottom of page) */
.masonry { padding: 16px 0 60px; }
.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  grid-auto-rows: 8px; /* base unit for row span calc */
}
.masonry-item { margin: 0; }
.masonry-item { display: block; }
.masonry-item img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .masonry-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Page-specific mobile override: single column masonry on landing page */
@media (max-width: 760px) {
  #landing-module-new .masonry-gallery { grid-template-columns: 1fr; }
}

/* Responsive column utilities (Bootstrap-like) */
/* Clients / Brands */
.client-section { padding: 40px 0 40px; }
.client-section h4 { text-align: center; font-size: 30px; margin: 0 0 12px 0; font-weight: 300; }
#previous-clients.clients { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: 120px; padding: 0 10px; }
#previous-clients .logo-wrapper { width: 160px; min-height: 80px; display: flex; justify-content: space-between; align-items: center; }
#previous-clients .logo { padding: 0 5px; max-width: 100%; max-height: 100%; height: auto; width: auto; display: block; margin: 0 auto; transition: opacity 2.5s ease-in-out; opacity: 1; }
#previous-clients .standard { height: 30px; }
#previous-clients .small { height: 25px; }
#previous-clients .medium { height: 45px; }
#previous-clients .tall { height: 60px; }
#previous-clients .extra-tall { height: 70px; }
#previous-clients .fading-in { opacity: 0; animation: fadeIn 2s forwards; }
#previous-clients .fading-out { animation: fadeOut 2s forwards; }
#landing-module-new > .client-section { margin-bottom: clamp(36px, 5vw, 72px); }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@media (max-width: 899px) {
  .client-section h4 { font-size: 25px; }
  #previous-clients .logo-wrapper { width: 30% !important; margin: 10px 0; display: block; }
}
/* xs: applies at all sizes */
.col-xs-1 { grid-column: span 1; }
.col-xs-2 { grid-column: span 2; }
.col-xs-3 { grid-column: span 3; }
.col-xs-4 { grid-column: span 4; }
.col-xs-5 { grid-column: span 5; }
.col-xs-6 { grid-column: span 6; }
.col-xs-7 { grid-column: span 7; }
.col-xs-8 { grid-column: span 8; }
.col-xs-9 { grid-column: span 9; }
.col-xs-10 { grid-column: span 10; }
.col-xs-11 { grid-column: span 11; }
.col-xs-12 { grid-column: span 12; }

/* sm ≥ 576px */
@media (min-width: 576px) {
  .col-sm-1 { grid-column: span 1; }
  .col-sm-2 { grid-column: span 2; }
  .col-sm-3 { grid-column: span 3; }
  .col-sm-4 { grid-column: span 4; }
  .col-sm-5 { grid-column: span 5; }
  .col-sm-6 { grid-column: span 6; }
  .col-sm-7 { grid-column: span 7; }
  .col-sm-8 { grid-column: span 8; }
  .col-sm-9 { grid-column: span 9; }
  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; }
  .col-sm-12 { grid-column: span 12; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .col-md-1 { grid-column: span 1; }
  .col-md-2 { grid-column: span 2; }
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-8 { grid-column: span 8; }
  .col-md-9 { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .col-lg-1 { grid-column: span 1; }
  .col-lg-2 { grid-column: span 2; }
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-9 { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .col-xl-1 { grid-column: span 1; }
  .col-xl-2 { grid-column: span 2; }
  .col-xl-3 { grid-column: span 3; }
  .col-xl-4 { grid-column: span 4; }
  .col-xl-5 { grid-column: span 5; }
  .col-xl-6 { grid-column: span 6; }
  .col-xl-7 { grid-column: span 7; }
  .col-xl-8 { grid-column: span 8; }
  .col-xl-9 { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }
}

/* Font preview grid */
.font-previews { padding: 40px 0 80px; }
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.preview-item { padding: 8px 0 0; border-top: 1px solid #e6e6e6; }
.preview-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #666; margin-bottom: 10px; }
.preview-heading { font-size: clamp(28px, 5.6vw, 56px); line-height: 1.1; font-weight: 200; }

@media (min-width: 860px) {
  .preview-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Font family assignments */
.font--space-grotesk .preview-heading { font-family: "Space Grotesk", var(--font-sans); }
.font--sora .preview-heading { font-family: "Sora", var(--font-sans); }
.font--outfit .preview-heading { font-family: "Outfit", var(--font-sans); }
.font--manrope .preview-heading { font-family: "Manrope", var(--font-sans); }
.font--inter-tight .preview-heading { font-family: "Inter Tight", var(--font-sans); }
.font--red-hat-display .preview-heading { font-family: "Red Hat Display", var(--font-sans); }
.font--chivo .preview-heading { font-family: "Chivo", var(--font-sans); }
.font--barlow .preview-heading { font-family: "Barlow", var(--font-sans); }
.font--urbanist .preview-heading { font-family: "Urbanist", var(--font-sans); }
.font--epilogue .preview-heading { font-family: "Epilogue", var(--font-sans); }

/* FAQ */
.faq { padding: 60px 0 100px; }
.faq__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 16px 0; text-align: center; }
.faq__columns { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 28px; }
.faq__list { margin: 0; }
.faq__item { border: 0; break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 8px 0; }
.faq__item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 0;
  font-weight: 200;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
  transition: transform .25s ease;
}
.faq__icon img { display: block; width: 20px; height: 20px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__content {
  color: var(--muted);
  padding: 4px 0 16px 36px; /* indent to align with text after icon */
  font-size: clamp(16px, 1.8vw, 18px);
}

@media (min-width: 900px) { .faq__columns { grid-template-columns: 1fr 1fr; } }

/* Mobile: remove gap between the two FAQ lists on this page only */
@media (max-width: 760px) {
  #landing-module-new .faq__columns { gap: 0; }
}


/* Contact */
.contact { padding: 80px 0 100px; }
.contact__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 18px 0; text-align: center; text-transform: none; }
.contact__wrapper { max-width: 720px; margin: 0 auto; }
.contact__form { display: grid; gap: 16px; }
.contact__form .input-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact__form .input-row--name { grid-template-columns: 1fr; }
.contact__form .input-row--contact { grid-template-columns: 1fr; }
@media (min-width: 720px) { .contact__form .input-row--contact { grid-template-columns: 1fr 1fr; } }

/* Minimal black/white inputs */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #111;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font: inherit;
}

.contact__form input[type="text"]::placeholder,
.contact__form input[type="email"]::placeholder,
.contact__form input[type="tel"]::placeholder,
.contact__form textarea::placeholder { color: #777; }

.contact__form textarea { resize: vertical; min-height: 120px; }

.contact__form .newsletter-submit {
  appearance: none;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
  width: fit-content;
}
.contact__form .newsletter-submit:hover { background: #000; }

.contact__form .submit-success-message { color: #111; font-weight: 600; }
.contact__form .privacy-promise { color: #444; font-size: 14px; }
.hide { display: none !important; }