/* Studiora override layer — loaded AFTER studiora-scraped.css (see app/layout.tsx),
   so equal-specificity rules here win the cascade by source order. */

/* ---------------------------------------------- Let's build something (section.number)
   White cards + 48px top/bottom padding on the section and each card. */
.section.number {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section.number .exploring-card,
.section.number .digital-card,
.section.number .global-wrap,
.section.number .conversion-wrap {
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #e7e7e7;
  color: #101010;
  padding-top: 48px;
  padding-bottom: 48px;
}

.section.number .exploring-title,
.section.number .exploring-last-title,
.section.number .global-number,
.section.number .exploring-author-name {
  color: #101010;
}

.section.number .exploring-details,
.section.number .global-card-details,
.section.number .exploring-sub-title,
.section.number .exploring-author-pst,
.section.number .roadmap-year {
  color: #6f6f6f;
}

.section.number .gray-color {
  color: #6f6f6f;
}

.section.number .white {
  color: #101010;
}

/* ---------------------------------------------- Client cards (section.client)
   Restore the middle client icons. Two problems: (1) the scraped
   `.client-icon { height: 100% }` never resolves (the wrap's height comes
   from content), leaving a 0px box so lazy-load never fires; (2) the icon
   SVGs ship with hardcoded white fills for the original dark cards, so they
   stay invisible on the flipped white base — same story as `.trusted-image`
   in app/globals.css, same invert fix. */
.section.client .client-icon-wrap {
  min-height: 136px;
}

.section.client .client-icon {
  height: 64px;
  width: auto;
  filter: invert(1);
}

/* ---------------------------------------------- Retired case studies
   MonsterFit / Synta / Passport & Co keep their detail pages, but their
   entries are hidden from the homepage Works list. */
.project-cl-item:has(a[href="/work/monsterfit"]),
.project-cl-item:has(a[href="/work/synta"]),
.project-cl-item:has(a[href="/work/passport-and-co"]) {
  display: none;
}

/* ---------------------------------------------- Works overlay CTA
   The scraped markup ships .project-tricker-bg at height: 0% — the Webflow/GSAP
   hover interaction that expanded it to 100% was dropped in the port, so the
   "Check This Project" button never appeared. Show it on the image strip —
   no height wipe, it snaps straight to full height. */
.project-v1-item-tricker .project-tricker-bg {
  height: 0%;
}

.project-v1-item-tricker:hover .project-tricker-bg,
.project-v1-item-tricker:focus-within .project-tricker-bg {
  height: 100%;
}

/* The scrim is near-black, so the CTA inverts to a white pill for contrast. */
.project-v1-item-tricker .project-tricker-bg .primary-button {
  background-color: #ffffff;
  color: #101010;
}

/* ---------------------------------------------- Navbar brand lockup
   Blue circular mark next to the Craftux wordmark. */
.navbar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.navbar-brand-logo-text {
  color: #004cfe;
}

.navbar-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
}

/* ---------------------------------------------- Glass panels without outline
   Keep the blur/tint on the footer CTA card and the contact info panel,
   drop the 1px border around them. */
.craft-footer-cta,
.craft-contact-info {
  border: 0;
}

/* ---------------------------------------------- Host Grotesk headings
   All h1-h6 sitewide use Host Grotesk (self-hosted variable font). */
@font-face {
  font-family: "Host Grotesk";
  src: url("/fonts/host-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("/fonts/host-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Host Grotesk", "Inter Tight", sans-serif;
}

/* ---------------------------------------------- Work detail (rise template)
   The rise hero wrapper carries a lg:mt-12 that collapsed straight out of the
   page and painted the blue body canvas above everything, while the absolute
   white navbar sat behind the hero's dark overlay. On these pages flow the
   nav in normal position (transparent on the rise grey) and paint the wrap
   with the rise grey so nav, gap and hero read as one canvas. */
.section-bg-wrap:has(.rise-work) {
  background-color: #efeeec;
}

.section-bg-wrap:has(.rise-work) .navbar {
  position: relative;
  inset: auto;
  z-index: 100;
  background-color: transparent;
}

/* Services detail: flow the nav above the blue hero (transparent on the white
   wrap) so hero content never sits under the absolute white navbar — same
   pattern as the work pages above. */
.section-bg-wrap:has(.craft-service-hero) .navbar {
  position: relative;
  inset: auto;
  z-index: 100;
  background-color: transparent;
}

/* Work detail breadcrumb — ported from the live riseatseven hero crumbs
   (12px black links at 40% opacity, angle-right separators, truncated
   current-page crumb). The generated rise-work.css lacks these utilities,
   so they are hand-authored here. */
.rise-work .rw-crumbs {
  padding-top: 14px;
}

/* Cap all work-detail content containers at 1440px and centre them on
   ultrawide screens. rise-work.css only sets padding on .px-4 — max-width
   and margin here don't conflict with it. */
.rise-work .px-4 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.rise-work .rw-crumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: #101212;
}

.rise-work .rw-crumbs li {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rise-work .rw-crumbs li + li::before {
  content: "›";
  margin: 0 12px;
  opacity: 0.4;
}

.rise-work .rw-crumbs a {
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.rise-work .rw-crumbs a:hover {
  opacity: 1;
}