/* ============================================================================
   Zamn Studios — visual override sheet.

   CSS is the other half of the content layer (see zamn-content.js). It survives
   Framer's hydration untouched, which is why anything visual lives here rather
   than in JS: hiding third-party artefacts, and swapping images.

   Loaded last on every page so these rules win on equal specificity.
   ==========================================================================*/


/* ----------------------------------------------------------------------------
   1. Template-author attribution and Framer badges.

   The footer credited the original template designer by name and linked to her
   Dribbble / Behance / LinkedIn / X / Framer profiles. Two of those were fully
   visible and clickable (431x24 and 121x19); the rest measured 0x0 but were
   still in the DOM and crawlable. Hidden by href so this keeps working even if
   Framer's generated class names change on a re-scrape.
   -------------------------------------------------------------------------- */
a[href*="framer.com/@yulia-design"],
a[href*="framer.link/yulia95"],
a[href*="framer.link/oSDAIqC"],
a[href*="dribbble.com/JuliaUi"],
a[href*="behance.net/tvorba"],
a[href*="yuliia-tsyhanenko"],
a[aria-label="Link to social network"],
.framer-c7dy4x,          /* "Created by Tvorba" wrapper */
.framer-drkbac,          /* "Built in Framer" wrapper   */
.framer-wbze5i-container, /* "Get Template for Free"    */
.framer-1bns4u9-container,
.__framer-badge,
[class*="__framer-badge"] {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   2. Client logos on the case-study pages.

   Each project's logo is one image hash, reused wherever that project appears
   (its own hero and the "other projects" cards on sibling pages), so a single
   global rule per hash covers every occurrence. Sources are the clients' own
   live sites; NPC's was an inline SVG on npcgroup.xyz and is rebuilt locally,
   stroked white like the others (its navy original vanished on dark covers).

   object-fit keeps the replacement inside the original box regardless of its
   aspect ratio — the slots are fixed-size and the real logos are not all the
   same proportions as the placeholders they replace.

   The early <head> script (#zamn-early) points these <img>s straight at the
   local logo with the hash kept as a #fragment, so the hash selectors below
   still match and the template PNG is never fetched.

   Project cards (homepage, /projects, "other projects"): the template centres
   a 280x47 logo over each cover. Over real site screenshots it overprinted the
   sites' own headlines, so it is hidden on cards. .framer-N3FWX is the card
   component; the case-study hero logo is not inside one and stays.
   -------------------------------------------------------------------------- */
.framer-N3FWX [data-framer-name="Logo"] {
  display: none !important;
}

img[src*="KkWkr3RKNgn6lh2DNmgXfnl0aM"] { content: url("/images/zamn/logo-olympian.svg"); }
img[src*="DcyjKN2M049L48Uer8gegvN3TM"] { content: url("/images/zamn/logo-scheerheart.png"); }
img[src*="o79azPQf14jyjMR3U8feqLgXO8"] { content: url("/images/zamn/logo-playheadshot.png"); }
img[src*="35aMUmf8cScxAjoEmMG8goNzOE"] { content: url("/images/zamn/logo-helogen.png"); }
img[src*="4j6RppykZH8p8VecD6Nb7IRJE"]  { content: url("/images/zamn/logo-aeos.png"); }
img[src*="8oy8lKEr1IItgZeA9GlzobqXq1g"] { content: url("/images/zamn/logo-npc-white.svg"); }

img[src*="KkWkr3RKNgn6lh2DNmgXfnl0aM"],
img[src*="DcyjKN2M049L48Uer8gegvN3TM"],
img[src*="o79azPQf14jyjMR3U8feqLgXO8"],
img[src*="35aMUmf8cScxAjoEmMG8goNzOE"],
img[src*="4j6RppykZH8p8VecD6Nb7IRJE"],
img[src*="8oy8lKEr1IItgZeA9GlzobqXq1g"] {
  object-fit: contain !important;
  object-position: center center !important;
}


/* ----------------------------------------------------------------------------
   3. Gradient blobs.

   Soft alpha blobs shipped as large warm-toned PNGs. Each is replaced with a
   blue recolour (same size, alpha and softness) as 10-bit AVIF, which keeps
   the gradients free of banding:
     M8wzz  footer, every page          742 KB PNG -> 31 KB
     NEAEk  /projects hero              871 KB PNG -> 50 KB
     97pPD  case-study heroes          1.07 MB PNG -> 52 KB
     psSsD  privacy and terms heroes    801 KB PNG -> 45 KB

   Every page's inline <style> also maps M8wzz to an older -blue.avif; this
   sheet loads later and wins (it used to point at the warm gradient-hero.avif,
   which is why the footer stayed orange). The early <head> script already
   sets each <img> to the same file (hash kept as a #fragment, so these rules
   still match); zamn-content.js COVERS then drops the fragment and srcset.
   -------------------------------------------------------------------------- */
img[src*="M8wzz19GZtHvkDOYvpNmIavSQw8"] {
  content: url("/images/zamn/art/gradient-footer-blue.avif");
}
img[src*="NEAEkUiU8H9fNw1zfdD2EeDQ0"] {
  content: url("/images/zamn/art/bg-projects-blue.avif");
}
img[src*="97pPDiD9Ghr6AUvYLD2tgSXmTFw"] {
  content: url("/images/zamn/art/bg-case-study-blue.avif");
}
img[src*="psSsDnPxiwqaEVCugg62cuf0"] {
  content: url("/images/zamn/art/bg-legal-blue.avif");
}


/* ----------------------------------------------------------------------------
   4. The "visit website" buttons on case-study pages shipped pointing at the
   template author's personal X account. They are NOT hidden above on purpose —
   zamn-content.js repoints each one at the real client site, so the button stays
   as designed and just goes somewhere true. Until that runs (a few hundred ms),
   suppress the click so nobody can land on the wrong destination.
   -------------------------------------------------------------------------- */
a[href*="x.com/YTsyhanenko"] { pointer-events: none; }


/* ----------------------------------------------------------------------------
   5. Dead nav item.

   The full-screen menu lists "blog", but there is no /blog in the mirror - it
   404s. Hidden until there is something to link to. Hiding the <a> keeps the
   menu's numbering rows intact; removing it would reflow the list.
   -------------------------------------------------------------------------- */
a[href="./blog"],
a[href="/blog"],
a[href$="/blog"],
a[href$="/blog/"] {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   6. Template-author social links, repointed by zamn-content.js.

   swapExternalLinks() rewrites their hrefs to real profiles so nothing
   crawlable points at the template author, which also stops the href rules
   in section 1 from matching. This marker keeps them hidden: the icons are
   still Dribbble / Behance artwork and would mislabel the new targets.
   -------------------------------------------------------------------------- */
a[data-zamn-hidden] {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   7. Menu overlay row for the template's "03 blog" link.

   Section 5 hides the <a>, but its row container (80px) stayed and left a
   visible hole between "projects" and "contact". Collapse the row itself.
   zamn-content.js fixMenu() does the same in JS and renumbers contact to 03,
   so browsers without :has() are covered too.
   -------------------------------------------------------------------------- */
#template-overlay [class$="-container"]:has(> a[href$="blog"]),
#template-overlay [class$="-container"]:has(> a[href$="blog/"]) {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   8. Menu overlay on small screens.

   Phones: the overlay's top bar kept the desktop 30px side padding while the
   header uses 16px, so the menu/close toggle jumped 14px left on open.

   Landscape phones (<=460px tall): each row slides up 150px as it scrolls
   into view, but the 03 row's start position is below the fold, so its
   in-view trigger never fires and it stayed invisible. Show the rows as-is
   at that height, close the 50px gap under the top bar so the three rows fit
   down to ~330px, and let the list scroll (touch) when it is still taller.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  #template-overlay [data-framer-name="Content"] > [data-framer-name="Top"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-height: 460px) {
  #template-overlay [data-framer-name="Items"] > * > a[href] {
    transform: none !important;
    opacity: 1 !important;
  }
  #template-overlay [data-framer-name="Content"] {
    gap: 12px !important;
  }
  #template-overlay div[data-framer-name="Menu"] {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}


/* ----------------------------------------------------------------------------
   9. Header.

   The logo link is only 20px tall. An invisible ::after grows its hit area to
   44px without moving the wordmark. Vertically only: the link's wrapper is
   overflow:hidden and exactly as wide as the link, so a sideways extension
   was clipped and never took a tap.

   Hide-on-scroll: Framer slides the <nav> up 64px and fades it to 0, but its
   fixed wrapper (.framer-j4mkjb-container: full width, 74px, z-index 10)
   stayed where it was and kept catching taps, so the top 74px of the screen
   was dead while the header was out of sight (the footer "book a call" on
   landscape phones, the tops of cards). The wrapper now lets taps through and
   only the <nav> takes them, and not once Framer has written its hidden
   state ("opacity: 0;" inline).

   Phones: the fixed header had no backdrop, so body copy scrolled straight
   under the logo and menu button. A soft fade in the page colour sits behind
   it. It is a pseudo-element of the header's own <nav>, so it slides and
   fades away with the header's hide-on-scroll instead of staying behind.

   Landscape phones (844-932px wide) and touch tablets up to 1199px get
   Framer's desktop header but have the same problem, so they get the
   backdrop too. The fade is 94px tall; it holds at .96 for its first 66%
   (62px, the logo row) so copy passing under the wordmark cannot show
   through, then fades out below. At the top of the page there is nothing to
   separate and it only laid a band over the hero art, so it fades in once
   the page has scrolled (html.zamn-scrolled, set by zamn-content.js).
   -------------------------------------------------------------------------- */
nav [data-framer-name="Logo"] > a::after,
nav a[data-framer-name="Logo"]::after {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 0;
  right: 0;
}

.framer-j4mkjb-container {
  pointer-events: none !important;
}
.framer-j4mkjb-container nav.framer-2nvn7f {
  pointer-events: auto;
}
.framer-j4mkjb-container nav.framer-2nvn7f[style*="opacity: 0;"] {
  pointer-events: none;
}

@media (max-width: 809.98px), (max-height: 500px) and (pointer: coarse), (max-width: 1199.98px) and (pointer: coarse) {
  nav.framer-2nvn7f::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% + 20px);
    background: linear-gradient(to bottom, rgba(10, 10, 12, .96) 0%, rgba(10, 10, 12, .96) 66%, rgba(10, 10, 12, 0) 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity .25s ease;
  }
  html.zamn-scrolled nav.framer-2nvn7f::before {
    opacity: 1;
  }
}


/* ----------------------------------------------------------------------------
   10. Phone footer.

   The copyright sat in a 30%-wide column (107px at 390, 4 lines at 320); it
   gets the full row. zamn-content.js adds the Privacy / Terms links the phone
   variant lacks (.zamn-legal), in the copyright's type at a muted colour.
   Not dimmer than .78: the footer sits on bright gradient art, where .62
   measured 3.6:1 and .78 measures 5:1.
   Tablet and desktop have their own links, so the row never shows there.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  [data-framer-name="Bottom"] > [data-framer-name="Container"] > [data-framer-name="Body"] {
    width: 100% !important;
  }
}

.zamn-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size: 14px;
  line-height: 21px;
}
.zamn-legal a {
  color: rgba(242, 244, 248, .78);
  text-decoration: none;
  padding: 10px 0;
  margin: -10px 0;
  transition: color .2s ease;
}
.zamn-legal a:hover,
.zamn-legal a:focus-visible {
  color: #f2f4f8;
}
@media (min-width: 810px) {
  .zamn-legal { display: none !important; }
}


/* ----------------------------------------------------------------------------
   11. Case-study hero.

   Phones: zamn-content.js groups the title's per-letter spans into words, so
   a line can only break between words (fitHeading shrinks the font when one
   word is wider than the column). Above 810px the title column is sized to
   its content and must not gain break points, so the words stay inline.

   810-1199px: the client logo sat beside the title with no room and was cut
   off at the column edge. It now wraps under the title when it does not fit.

   Phones: the logo box is a fixed 267px, wider than the title column at
   320-360px (214px at 320), so the wordmark was cut ("SCHEER HEA"). Capped
   at the column; object-fit:contain (section 2) scales the logo down in it.

   The meta values (Industry / Scope / Duration) keep their preset type via
   setDeepText; the colour here only matters if that wrapper is ever lost.
   -------------------------------------------------------------------------- */
.zamn-word { white-space: nowrap; }
.zamn-sp { white-space: pre; }
@media (max-width: 809.98px) {
  .zamn-word { display: inline-block; }
  .zamn-sp { white-space: normal; }
  [data-framer-name="Logo Container"],
  [data-framer-name="Logo Container"] > [data-framer-name="Logo"] {
    max-width: 100% !important;
  }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  [data-framer-name="Top Container"] > [data-framer-name="Text Container"] {
    flex-wrap: wrap !important;
    column-gap: 32px !important;
    row-gap: 8px !important;
  }
}

[data-framer-name="Tag Row"] > [data-framer-name="Tag Text"]:last-child {
  color: rgba(242, 244, 248, .72);
}


/* ----------------------------------------------------------------------------
   12. Homepage at the narrowest phones.

   The intro paragraph's box is a fixed 358px (the 390px design width), so at
   320-375 it overflowed the 16px gutters and clipped its edge letters.

   At <=360px the hero ticker's longest word ("Products") is wider than the
   space beside "for" and was cut by its mask. The headline scales with the
   viewport there; the ticker's offsets are fixed px, so it keeps running.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  #cta1 > [data-framer-name="Content"],
  #cta1 > [data-framer-name="Content"] > [data-framer-name="Text"] {
    width: min(358px, 100%) !important;
  }
}

@media (max-width: 360px) {
  [data-framer-name="Headline Text Container"] h1 {
    --framer-font-size: calc((100vw - 32px) * .178) !important;
  }
}


/* ----------------------------------------------------------------------------
   13. Project-card covers are uncropped 16:10 screenshots of the client sites.

   object-fit:cover cut their headlines at phone and wide-tablet card ratios.
   contain shows the whole shot; at desktop the 16:10 file matches the card,
   elsewhere the dark card background frames it. Hash kept in the #fragment.
   -------------------------------------------------------------------------- */
.framer-N3FWX img[src*="/images/zamn/covers/"] {
  object-fit: contain !important;
  object-position: center center !important;
  background: #0a0a0c;
}