/*
  GK STUDIO — Global Typography Normalization
  Compensates for Squarespace platform CSS not loading in the static mirror.
  Font: Poppins (locally cached at /fonts.googleapis.com/poppins.css)
*/

/* ─── Base ─────────────────────────────────────── */
html, body {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #1a1a1a !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ─── Headings — family + weight only, no size (inline styles win) ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

h1 {
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
}

h2 {
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

h3 {
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.35 !important;
}

h4 {
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

/* ─── Body copy ─────────────────────────────────── */
p, li, blockquote {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  letter-spacing: 0em !important;
}

/* ─── Squarespace-specific large body text class ─── */
.sqsrte-large {
  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  letter-spacing: 0em !important;
}

/* ─── Strong / em ─────────────────────────────── */
strong, b {
  font-weight: 600 !important;
}

em, i {
  font-style: italic !important;
}

/* ─── Links ─────────────────────────────────────── */
a {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ─── Nav (shared across sub-pages) ────────────── */
.header-nav-item a,
.nav-wrapper a {
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

/* ─── Section overview intros (top of each page) ── */
.sqs-html-content .sqsrte-large:first-child {
  font-size: 16px !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

/* ─── Image captions ─────────────────────────────── */
figcaption, .image-caption, .image-caption p {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  opacity: 0.65 !important;
}

/* ─── Gallery / slideshow meta text ──────────────── */
.sqs-gallery-meta-container,
.slide-title, .slide-description {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

/* ─── Buttons ─────────────────────────────────────── */
.sqs-block-button-element,
button, [role="button"] {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

/* ─── Universal bright-inverse background fix ──────── */
/* SQS bright-inverse sections without a background image/video show a dark
   gray slab because the platform CSS sets a dark background-color on the
   section element. We force transparent so the white page body shows through.
   Sections that DO have a background image/video are fine: the dark overlay
   comes from .section-background + ::after, not the element background-color. */
section.page-section.bright-inverse {
  background-color: transparent !important;
}
section.page-section.bright-inverse .section-background {
  background-color: transparent !important;
}
section.page-section.bright-inverse h1,
section.page-section.bright-inverse h2,
section.page-section.bright-inverse h3,
section.page-section.bright-inverse h4,
section.page-section.bright-inverse p,
section.page-section.bright-inverse li,
section.page-section.bright-inverse figcaption,
section.page-section.bright-inverse .sqsrte-large {
  color: #111 !important;
}

/* ─── Project banners on subpages — centered, uses Site Styles H1 variable ─── */
/* Targets H1s inside SQS HTML blocks (VICKS, E*TRADE, PEPTO BISMOL, etc).
   Uses --gke-h1-size variable so Site Styles slider actually moves these. */
.sqs-html-content h1 {
  text-align: center !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--gke-h-weight, 300) !important;
  letter-spacing: 0.02em !important;
  font-size: var(--gke-h1-size, 3.2rem) !important;
  line-height: 1.05 !important;
  margin: 0.3em auto !important;
  max-width: 1200px !important;
  text-transform: none !important;
}

/* ─── Vicks section: two videos side-by-side baseline on desktop ──────── */
/* No !important — so the editor's layout mode can move them around.
   This is the DEFAULT layout; once the user drags a video, the editor's
   inline style overrides this rule with normal CSS specificity. */
@media (min-width: 768px) {
  .fe-block-697237972393f39bf3286ba4 {
    grid-area: 3 / 2 / 22 / 14;
  }
  .fe-block-6972379796aa2762a433a93c {
    grid-area: 3 / 14 / 22 / 26;
  }
}

/* ─── ASSORTED section: convert slideshow → bento grid ──────────────── */
/* Section: 69285bebd9ce513e77cc0e38. Hides slideshow chrome and lays out
   all gallery images in a responsive grid with varied cell sizes. */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery-controls,
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery-thumbnails,
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery-meta-container {
  display: none !important;
}

/* Grid container */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  grid-auto-rows: 200px !important;
  grid-auto-flow: dense !important;
  gap: 10px !important;
  height: auto !important;
  position: static !important;
}

/* Each slide becomes a grid cell */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery .slide,
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery > div:not(.sqs-gallery-thumbnails):not(.sqs-gallery-meta-container):not(.sqs-gallery-controls) {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  z-index: auto !important;
}

/* Images fill cells, cropped */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 4px !important;
}

/* Bento variation — every 5th cell spans 2 columns and 2 rows */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery > *:nth-child(5n+1) {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery > *:nth-child(7n+3) {
  grid-row: span 2 !important;
}

/* Hide intrinsic-wrapper boxes so child images reach the grid cell edges */
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery .intrinsic,
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery .intrinsic-inner,
[data-section-id="69285bebd9ce513e77cc0e38"] .sqs-gallery .sqs-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  inset: auto !important;
  display: block !important;
  left: auto !important;
  top: auto !important;
}

/* ─── Logo height — consistent across all pages ─── */
.header-title-logo,
.header-title-logo img,
.header-title img {
  max-height: 41px !important;
  height: auto !important;
  width: auto !important;
}

/* ===== LOGO WHITE FIX ===== */
.header-title-logo img,.header-title img,img.custom-logo,.header-title-logo svg {
  filter: brightness(0) invert(1) !important;
}

/* ===== WHAT I OFFER label fix ===== */
.section-label,[data-section-label],.page-section .section-intro p:first-child,p.what-i-offer-label {
  font-size: 11px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  opacity: 1 !important;
}

/* ===== HOMEPAGE SECTION SPACING ===== */
.page-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Breathing room between offer section and selected work */
.page-section + .page-section {
  margin-top: 0 !important;
}

/* ===== CARD BRAND NAME ALIGNMENT ===== */
.gallery-item-title,.portfolio-item-title,.summary-thumbnail-title {
  font-family: 'Domaine Display', 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* LOGO WHITE */
.header-title-logo img,.header-title img,img.custom-logo{filter:brightness(0) invert(1) !important;}