/* Marketing-site specific styles */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--fg-1); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.site { width: 100%; }
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* Section rhythm */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-paper { background: var(--fika-paper); }
.section-cream { background: var(--fika-off-white); }
.section-ink { background: var(--fika-espresso); color: var(--fika-paper); }
.section-orange { background: var(--fika-orange); color: var(--fg-on-orange); }

.divider { height: 1px; background: var(--bd-line); }

/* Photo placeholders */
.photo {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--gray-200);
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex; align-items: flex-end;
}
.photo .photo-label {
  padding: 14px 16px;
  opacity: 0.85;
}
.photo.warm { background: linear-gradient(160deg, #4A4A4A, #1A1A1A); }
.photo.cool { background: linear-gradient(160deg, #8A8A8A, #404040); }
.photo.sage { background: linear-gradient(160deg, #B5B5B5, #5A5A5A); }
.photo.cream { background: linear-gradient(160deg, #EFEFEF, #BCBCBC); color: var(--gray-900);}

/* Services mobile CTA hidden by default (shown only on mobile) */
.services-cta-mobile { display: none; }

/* Buttons (used outside the preview cards) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 50px; padding: 0 26px; border-radius: var(--r-pill);
  font: 500 15px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease-out);
}
.btn-primary { background: var(--fika-orange); color: var(--fg-on-orange); }
.btn-primary:hover { background: var(--fika-orange-deep); transform: translateY(-1px); }
.btn-primary:active { background: var(--fika-orange-deep); transform: translateY(0); box-shadow: var(--sh-press); }
.btn-secondary { background: var(--bg-raised); color: var(--fg-1); border-color: var(--bd-line); }
.btn-secondary:hover { background: var(--fika-paper-deep); }
.btn-ghost { background: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--fika-paper-deep); }
.btn-on-ink { background: var(--fika-paper); color: var(--fika-espresso); }
.btn-on-ink:hover { background: var(--fika-cream); }
.btn-on-orange { background: var(--fika-espresso); color: var(--fika-paper); }
.btn-on-orange:hover { background: black; }

/* Chip */
.chip-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--fika-paper-deep); color: var(--fg-1);
  font-size: 12.5px; font-weight: 500;
}
.section-ink .chip-pill { background: rgba(246,241,232,0.1); color: var(--fika-paper); }

/* Editorial helpers */
.eyebrow-mk {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fika-orange-deep); font-weight: 500;
}
.section-ink .eyebrow-mk { color: var(--fika-orange-soft); }

/* ─── Responsive layout ─────────────────────────────── */
@media (max-width: 768px) {

  /* Reduce section vertical padding on mobile */
  .section { padding: 64px 0; }
  [style*="paddingTop: 140"], [style*="paddingTop: 160"] { padding-top: 72px !important; }

  /* Skouta: visual on top, text below */
  .skouta-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-top: 40px !important;
  }
  .skouta-visual { order: 1; }
  .skouta-text   { order: 2; }

  /* Phone visual: reduce height, hide annotation pills */
  .phone-visual-wrap { min-height: 420px !important; }
  .phone-annotation  { display: none !important; }

  /* Skouta stats: 2 columns instead of 4 */
  .skouta-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-top: 48px !important;
  }

  /* Credibility: text on top, logos below */
  .credibility-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Studio (Who we are): photos on top, copy below */
  .studio-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .studio-photos { order: 1; }
  .studio-copy   { order: 2; }

  /* Closing CTA: force 2-line headline on small screens */
  .closing-headline { font-size: 44px !important; }

  /* General 2-col grids → single column */
  .how-we-work-grid,
  .founder-grid,
  .story-grid { grid-template-columns: 1fr !important; }

  /* Story grid: un-sticky the left column on mobile */
  .story-grid > div:first-child { position: static !important; }

  /* Hero: visual on top, text below */
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-visual { order: 1; }
  .hero-text { order: 2; }

  /* Services: hide header CTA, show rail CTA; collapse to 2 cols (hide visual) */
  .services-cta-desktop { display: none !important; }
  .services-cta-mobile { display: inline-flex !important; }
  .services-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) !important; }
  .services-stage > div:last-child { display: none !important; }

  /* Work page */
  .project-facts-strip { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .case-study-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .case-study-rail { display: none !important; }
  .services-applied-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .sources-grid { grid-template-columns: 1fr !important; }

  /* Services page */
  .service-index-row { grid-template-columns: 48px 1fr 32px !important; gap: 16px !important; }
  .service-index-summary { display: none !important; }
  .service-section-header { grid-template-columns: 1fr !important; gap: 24px !important; }
  .service-section-body { grid-template-columns: 1fr !important; gap: 40px !important; }
  .good-for-sticky { position: static !important; }

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-sticky { position: static !important; }
  .contact-name-row { grid-template-columns: 1fr !important; }
}