/* ==========================================================================
   Automatik — custom responsive overrides
   Loaded after Framer's generated styles on every page. Uses !important to
   beat Framer's inline styles. Desktop (>=1200px) is left untouched.
   ========================================================================== */

/* ---- Global guards (all sizes) ----
   NOTE: must be `clip`, not `hidden` — overflow-x:hidden turns body into a
   scroll container, which silently disables EVERY position:sticky descendant
   (the pinned Testimonial banner, the Client carousel). `clip` blocks
   sideways scrolling without creating a scroll container. */
html, body {
  overflow-x: clip !important;
}

/* Fade-up used to hold a section back until the hero intro has played (phone
   only — see the About rule in the phone block). Keyframe names are global, so
   this lives outside the media queries. */
@keyframes automatik-after-hero {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Holds the hero symbol fully transparent until its fly-in starts (phone only
   — see the Automatik Symbol rule in the phone block). */
@keyframes automatik-symbol-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Remove the "Made in Framer" badge everywhere */
#__framer-badge-container,
.__framer-badge {
  display: none !important;
}

/* Case-study "More Works" section: drop the template's leftover label bar
   ("© Selected Works こんにちは / (WDX® — 02) / Digital Designer") — the
   framer-1ki1tl3-container component is that bar (one per size variant). */
section[data-framer-name="More Works"] .framer-1ki1tl3-container {
  display: none !important;
}

/* Clients section: hide the "(3)" count superscript next to the heading
   (phone/tablet template heading; the desktop ::before title has none). */
section[data-framer-name="Client"] [data-framer-name="Number"] {
  display: none !important;
}

/* Marquee-style label bar (data-framer-name="L", always white background).
   On Services the eqDmnbQxL preset is scoped to .framer-5AT3m and resolves to
   #cfcfcf, so the labels read light-grey on white; every other page scopes the
   same preset to .framer-kdUcE and gets #000. Pin it black on all of them. */
.framer-TJkAr[data-framer-name="L"] .framer-styles-preset-izlnn8 {
  --framer-text-color: #000000 !important;
  color: #000000 !important;
}

/* ---- White label bars scroll horizontally (see assets/custom/marquee.js) ----
   marquee.js appends aria-hidden copies of the labels and sets --ak-marquee-*
   per bar; these rules do the moving. Uses the `translate` longhand, never
   `transform`, so it composes with Framer's own transforms rather than
   replacing them. Shifting by exactly one sequence width lands copy N+1 where
   copy N started, so the loop has no visible seam. */
@keyframes ak-marquee-scroll {
  from { translate: 0 0; }
  to   { translate: calc(-1 * var(--ak-marquee-shift, 0px)) 0; }
}

.ak-marquee {
  /* The bars space their labels with `center`/`space-between`; once the row is
     longer than the bar that has to go or the sequence starts off-position.
     --ak-marquee-gap then carries the spacing (for the hero banner, matching
     what space-between was producing, so nothing shifts when it takes over). */
  justify-content: flex-start !important;
  place-content: center flex-start !important;
  flex-wrap: nowrap !important;
  column-gap: var(--ak-marquee-gap, 0px) !important;
}

/* Only the labels move — the hero banner's absolutely-positioned "BG" strip is
   a sibling and has to stay where it is. */
.ak-marquee > .ak-marquee-item {
  flex: 0 0 auto !important;
  animation: ak-marquee-scroll var(--ak-marquee-duration, 40s) linear var(--ak-marquee-delay, 0ms) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ak-marquee > .ak-marquee-item { animation: none; }
}

/* 404 page: the "Page Not Found" container is hard-coded to 3000px while
   its content ends within one screen — ~1900px of dead space at every
   breakpoint. Cap it at viewport height. */
section.framer-17hhdhh {
  height: 100vh !important;
  min-height: 640px !important;
  overflow: hidden !important;
}

/* Header nav on every page except home (<html class="ak-subpage">).
   The nav and its underline carry a Framer appear animation whose delay is
   sequenced against the HOME hero intro: the rule sweeps in from -1520px at
   4s, the nav drops from -90px at 4.5s (see __framer__appearAnimationsContent
   in the page source). Inner pages have no hero to wait for, so the header is
   simply absent for the first four and a half seconds — which reads as "the
   nav doesn't load until I scroll". Pin both to their final values here; the
   inline initial state is re-applied whenever the route bundle re-renders
   #main, so this has to be !important rather than a JS fix-up. */
.ak-subpage nav[data-framer-name="Nav Menu"] {
  opacity: 1 !important;
  transform: none !important;
}
.ak-subpage header .framer-1nghd2e {
  transform: none !important;
}

/* Home is deliberately left alone: there the same 4.5s hold is the hero
   intro's opening beat, and Framer's appear pass drives it. */

/* Footer "Quick Links": the template's row is a fixed-width, no-wrap flex
   line sized for exactly four labels. With Privacy and Terms added it runs
   ~300px and would push into the Networks column, so let it wrap onto a
   second line and cap the column instead. Scoped to Menu Links — the
   Networks list next to it uses the same component classes. */
footer [data-framer-name="Menu Links"] {
  width: auto !important;
  max-width: min(240px, 100%) !important;
}
footer [data-framer-name="Menu Links"] .framer-9tme3y {
  flex-wrap: wrap !important;
  row-gap: 2px !important;
}

/* ==========================================================================
   PHONE  (<= 809px — Framer's phone breakpoint)
   ========================================================================== */
@media (max-width: 809px) {

  /* --- Nav: logo + quick links don't fit at 375; shrink logo, tighten pad --- */
  nav[data-framer-name="Nav Menu"] {
    padding: 18px 20px !important;
  }
  nav[data-framer-name="Nav Menu"] [data-framer-name="Automatik Wordmark"],
  nav[data-framer-name="Nav Menu"] [data-framer-name="Automatik Wordmark"] div,
  nav[data-framer-name="Nav Menu"] [data-framer-name="Automatik Wordmark"] img {
    width: 108px !important;
    height: auto !important;
    aspect-ratio: 351 / 61;
    min-width: 0 !important;
    object-fit: contain !important;
  }
  nav[data-framer-name="Nav Menu"] a[data-framer-name="Logo"] {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* --- Hero symbol: keep any symbol from exceeding the viewport --- */
  [data-framer-name="Automatik Symbol"] {
    max-width: calc(100vw - 40px) !important;
  }
  [data-framer-name="Automatik Symbol"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* --- Hero reflow: the template ships an EMPTY "Reel" placeholder that
     eats 220px mid-hero. Hide it and lay out heading -> band -> symbol. --- */
  [data-framer-name="Hero"] [data-framer-name="Reel"] {
    display: none !important;
  }
  [data-framer-name="Hero"] .framer-1y2k8yn-container {
    top: 260px !important;
  }

  /* --- Hero flow: compact, content-height hero — heading + icon, white
     band (absolute at 260px), wordmark a beat below the band, then the
     next section follows immediately. No viewport-filling stretch: a
     growing Bottom made the wordmark scale past the viewport and crop. --- */
  [data-framer-name="Hero"] {
    min-height: 0 !important;
    height: auto !important;
  }
  [data-framer-name="Hero"] > [data-framer-name="Top"] {
    flex-grow: 0 !important;
  }
  [data-framer-name="Hero"] > [data-framer-name="Bottom"] {
    flex-grow: 0 !important;
    margin-top: 64px !important;    /* Top ends ~248; band sits 260-284 */
    margin-bottom: 28px !important;
  }

  /* --- Hero symbol: small, tucked into the empty space right of the
     heading text ("Automations and implementations..."), above the white
     band at 260px. Its containing block is Top, whose 30px padding is
     symmetric and whose only visible child is the Heading — so top:50%
     + translateY(-50%) lands exactly on the heading's midline at every
     width and line count. (The previous hard-coded 123px offset was
     measured from the wrong origin and sat 44px low, dropping the symbol
     out of the text block and into the corner above the band.) --- */
  [data-framer-name="Hero"] .framer-itdsw8-container {
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(26vw, 110px) !important;
    /* The heading is a fixed 24px with hard line breaks, so its longest line
       always ends at x=224 no matter the viewport. Cap the symbol to whatever
       is left (224 + 12px clearance + the 24px right gutter = 260) so it never
       runs into the text on a narrow phone. */
    max-width: calc(100vw - 260px) !important;
    height: auto !important;
    margin: 0 !important;
    /* Centre via the `translate` LONGHAND, never `transform`: the intro
       appear animation drives `transform` per frame (scale .3 -> 1, and it
       settles on `transform:none`), and `translate` composes outside it. An
       `!important` transform here would win every frame and drop the symbol
       out of the intro entirely — which is exactly what it used to do, the
       icon simply sat there while the wordmark and heading animated in. */
    translate: 0 -50% !important;
  }
  [data-framer-name="Hero"] [data-framer-name="Automatik Symbol"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;

    /* Hide the symbol until it actually starts flying in. Its appear animation
       holds `opacity: 0.1` for the whole 2.9s lead-in; on desktop that ghost is
       off-screen (x=1428 in a 1425px viewport) so nobody sees it, but the phone
       variant starts mostly ON-screen, leaving a faint icon parked in the
       corner. It can't be fixed from the appear config alone: motion re-applies
       the `oi` prop out of the JS chunk on hydration, adding a SECOND opacity
       track (0.1 -> 1) that lands last and wins the cascade — and that chunk is
       served `immutable`, so patching it would strip returning visitors. This
       element's own opacity is untouched by Framer, so a CSS ramp here
       MULTIPLIES with the container's animated opacity: 0 until 2.9s, then a
       300ms ease up to full so it emerges as the fly-in begins, with no pop. */
    animation: automatik-symbol-reveal 300ms linear 2.9s both;
  }

  /* --- Gap below the wordmark: the About section that follows the hero
     carries a desktop-scale 118px top padding on top of its own 60px inner
     padding, which — added to the hero's 28px bottom margin — left 207px of
     dead black between the "automatik" wordmark and the intro paragraph.
     Drop the outer padding; the inner 60px + 28px is the right rhythm on a
     phone. (.framer-1ax983m is the intro About only — the second About
     section further down the page is .framer-1390c7e.) --- */
  section[data-framer-name="About"].framer-1ax983m {
    padding-top: 0 !important;

    /* ...and it must not beat the hero onto the screen. On desktop the hero
       is a full viewport tall, so this section starts below the fold and is
       revealed by scrolling. On phone the hero is content-height (~423px), so
       this section lands INSIDE the first viewport and painted instantly —
       "Every business has more opportunity…" was fully legible at t=0 while
       the hero was still blank. Hold it through the hero intro (the last hero
       element starts at 4.5s and its spring settles ~5.2s), then bring it up
       with the same easing the symbol uses. `both` keeps it hidden during the
       delay. Verified: nothing inside this section is sticky/fixed, so the
       keyframe's `translate` can't hijack a containing block. */
    animation: automatik-after-hero 700ms cubic-bezier(.73, 0, .33, 1) 4.9s both;
  }

  /* --- White bar: four labels can't fit at 375px (space-between crushes
     them together). Show three, slightly smaller, evenly spread. --- */
  .framer-1y2k8yn-container [data-framer-name="Appear"] {
    padding: 0 20px !important;
  }
  .framer-1y2k8yn-container [data-framer-name="Text 4"] {
    display: none !important;
  }
  .framer-1y2k8yn-container [data-framer-name^="Text"] p {
    font-size: 11px !important;
  }

  /* --- Nav on inner pages (Work/Services/Contact/case studies): the nav
     component there has no phone variant — it renders the desktop item row
     (menu links + "Based in Montreal" info block, ~600px) into a 375px
     viewport, crushing it against the logo. Drop the info block and let
     logo/menu share the row. --- */
  nav[data-framer-name="Nav Menu"] {
    justify-content: space-between !important;
    column-gap: 16px !important;
  }
  nav[data-framer-name="Nav Menu"] [data-framer-name="Info"] {
    display: none !important;
  }
  nav[data-framer-name="Nav Menu"] [data-framer-name="Items"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
}

/* ==========================================================================
   TABLET  (810–1199px — Framer's tablet breakpoint)
   ========================================================================== */
@media (min-width: 810px) and (max-width: 1199px) {

  /* --- Hero: the tablet variant's chrome symbol (379px) collides with the
     marquee band at its designed 396px position. The hero's own giant
     wordmark occupies the bottom region, so the band must stay put —
     shrink the symbol to fit the zone between nav and band instead. --- */
  [data-framer-name="Hero"] [data-framer-name="Automatik Symbol"] {
    width: 250px !important;
    height: 250px !important;
  }

  /* --- ...but shrinking the symbol only cleared the top half. The band is
     absolutely positioned at a hard-coded top:396px (no breakpoint variant),
     while at this width the hero stacks Top (90–388) straight into the giant
     wordmark (388 onwards) — so the band still lands ~32px inside the
     wordmark's cap height. Nothing here is repositionable on its own: the
     band's 396px is baked into the page bundle and the wordmark is flow
     content. Opening a column gap moves the wordmark down instead, which
     leaves symbol 114–364, band 396–420, wordmark 452 — even 32px margins
     on both sides of the band. --- */
  section.framer-dhlfab[data-framer-name="Hero"] {
    gap: 64px !important;
  }
}

/* ==========================================================================
   DESKTOP  (>= 1200px)
   ========================================================================== */
@media (min-width: 1200px) {

  /* --- Clients section title: the template only ships a "Clients" heading
     for phone/tablet (hidden-72rtr7) and React removes that node entirely
     on desktop, so a real element can't be un-hidden. Recreate it as a
     ::before, styled identically to the "Featured Work" section title
     (Inter Display 600, 208px/168px, -8px tracking, 10px page gutter). --- */
  section[data-framer-name="Client"]::before {
    content: "Clients";
    display: block;
    width: 100%;
    padding: 0 10px;
    font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
    font-weight: 600;
    font-size: 208px;
    line-height: 168px;
    letter-spacing: -8px;
    color: #fff;
    text-align: left;
  }
}