/* =====================================================================
   Monark Studio — responsive.css
   Overrides only. style.css is never touched; this file is loaded after
   it (see index.html), so equal-specificity rules here win the cascade.
   No class names are changed — every selector matches index.html.

   Breakpoints:
     Tablet ............. max-width: 991px
     Mobile Landscape ... max-width: 767px
     Mobile Portrait .... max-width: 479px
   ===================================================================== */


/* =====================================================================
   GLOBAL (all breakpoints)
   ===================================================================== */

/* Custom cursor (.mk-cur-dot + .mk-cur-ring, injected by main.js's
   initCursor()) is the intended desktop effect — a dot that follows the
   pointer plus a lagging ring that expands/inverts over links, buttons,
   service rows and FAQ questions, and shows a "VIEW ↗" label over project
   cards. main.js already gates its creation to real desktop pointers
   (FULL = !isMobile && !isTouch && !reduceMotion), but on genuine touch
   devices without a live pointer it would otherwise sit statically at
   0,0 and read as two floating dots. Scope the hide to touch/coarse
   pointers only so desktop keeps the effect. !important is required
   because the JS <style> is injected after this file. */
@media (hover: none), (pointer: coarse) {
  .mk-cur-dot,
  .mk-cur-ring {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

/* Nav: force a clean flex row (logo | links | hamburger) at every
   breakpoint. The Webflow base .nav-bar is a 12-col grid with an
   absolutely-positioned logo that overlaps the first link, so this needs
   fixing everywhere, not just desktop. The reference design also keeps a
   hamburger icon pinned top-right at every screen size (hook up its click
   toggle separately in JS — this is a visual match only). */
.nav-bar {
  display: flex;
  grid-template-rows: none;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
}
.image-2 {
  position: static;
}
.nav-bar::after {
  content: "";
  width: 26px;
  height: 12px;
  flex: none;
  background:
    linear-gradient(#fff, #fff) left top 2px / 26px 2px no-repeat,
    linear-gradient(#fff, #fff) left top 9px / 26px 2px no-repeat;
}

/* Service links ("AI AUTOMATION" etc.) carry empty desktop-only <br> tags
   from the Webflow export; strip them at every breakpoint so the list
   never sprawls over blank lines. */
.link-2 br {
  display: none;
}
.link-2 {
  margin-bottom: 0;
}

/* "LET'S TALK / KRISHNA SONI" contact card: Webflow hardcodes it to
   position:absolute; top:551.6px; right:729.9px — a fixed offset authored
   against one specific canvas width, so at real viewport widths (even
   plain 1440px desktop) it floats near center-left instead of the
   bottom-right corner shown in the reference. Re-anchor it bottom-right
   with a compact, capped width at every size; the ≤767 tier further down
   swaps this for a full-width bottom bar instead. */
.div-block-15 {
  position: absolute;
  top: auto;
  left: auto;
  right: 40px;
  bottom: 40px;
  width: auto;
  max-width: 460px;
  padding: 18px 22px 18px 18px;
  /* width:auto hugs content, which leaves justify-content:space-between
     with zero slack to distribute -- avatar and text end up flush against
     each other. An explicit gap guarantees breathing room regardless. */
  gap: 24px;
  justify-content: flex-start;
}
.text-block-4 {
  padding-right: 0;   /* desktop 147px right padding blew out the card */
}
/* The arrow button (link-block) has an unconditional Webflow offset —
   position:relative; left:217px; bottom:44px — authored to visually nudge
   it into place against the ORIGINAL (also broken) wide canvas position of
   this card. Now that the card sits compact/re-anchored, that same 217px
   shove pushes the button off the card entirely (and off-screen at typical
   desktop widths). Zero it out so the button stays in its normal flex flow. */
.link-block {
  left: 0;
  bottom: 0;
  max-width: 76px;
  height: 32px;
}
/* Card grew (see .div-block-15 above) — scale the avatar and copy up with
   it instead of leaving them at Webflow's original cramped desktop size. */
.image-8 {
  width: 130px;
  height: 130px;
}
.div-block-17 {
  gap: 10px;
}
.text-block-3 {
  font-size: 14px;
  letter-spacing: 1px;
}
.paragraph-3 {
  font-size: 22px;
  margin: 4px 0;
}
.text-block-4 {
  font-size: 14px;
}

/* About section: Webflow fakes the column layout with huge negative
   margins/paddings (heading-3 margin-top:-88px, paragraph-4 margin-top:
   -154px + padding:0 88px 0 465px, paragraph-5 margin-left:835px,
   div-block-27 margin-right:-372px + padding-right:455px) authored against
   one specific canvas width. style.css's own ≤1200px tier already
   neutralizes most of these, so the section only looks broken above
   1200px (same bug pattern as the hero card) — but neither tier gives it
   the reference's stacked label/divider/heading treatment, so fix that
   part everywhere. */
.div-block-21 {
  margin: 0 24px;
}
.div-block-22 {
  flex-direction: column;
  align-items: stretch;
  padding-top: 40px;
}
.div-block-23 {
  border-bottom: 1px solid #333;
  padding-bottom: 20px;
}
.heading-3 {
  margin-top: 0;
}
.heading-3::before {
  content: "→ ";
}
.heading {
  margin-bottom: 8px;
  margin-left: 0;
}
.heading-2 {
  margin-top: 0;
  margin-left: 0;
  font-weight: 700;   /* match .heading so the two read as one flowing block */
}
.div-block-26 {
  max-width: 100%;
  aspect-ratio: 4 / 5;
}
.image-9 {
  object-fit: cover;
}
/* The div right after the image wrapper (para+button, para, year) has no
   class in the markup, so it gets no gap at all by default -- everything
   just stacks with bare paragraph margins, reading cramped. Give it one;
   the desktop tier below overrides this to a row for the ≥1200px case. */
.div-block-26 + div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.div-block-27 {
  margin-right: 0;
  padding-right: 0;
  max-width: 100%;
}
.paragraph-4 {
  margin-top: 0;
  padding: 0;
  max-width: 100%;
}
.paragraph-5 {
  margin-top: 0;
  margin-left: 0;
}

/* Projects section: "[04]" (heading-5) carries the same desktop-canvas
   hack — position:relative; bottom:153px; margin-left:858px — tuned to
   sit next to "PROJECTS" only at one specific heading-4 font-size. style.
   css's own ≤1200 tier "fixes" it by dropping it to a stacked line below
   instead, which doesn't match the reference either (bracket sits inline
   beside the heading at every size shown). Make it a proper inline-flex
   row so it stays put regardless of font-size. The wrapper div has no
   class, so target it via the adjacent-sibling combinator off div-block-30. */
.div-block-30 + div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.heading-5 {
  position: static;
  margin: 0;
  bottom: auto;
}

/* Project cards: stretch info to match the image's height so psc-loc
   (the arrow + location footer) lands at the image's bottom edge instead
   of sitting right under the category line. Also add the footer divider +
   arrow the reference shows above the location line (psc-loc's own text
   is the only content there, so the arrow is a ::before and the divider a
   border-top; flexbox still spaces them apart since ::before counts as a
   flex item). */
.project-single-card {
  align-items: stretch;
}
.psc-loc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #333;
  margin-top: auto;
  padding-top: 16px;
}
.psc-loc::before {
  content: "→";
  opacity: 0.6;
}


/* =====================================================================
   DESKTOP HERO  —  min-width: 1200px
   Rework the hero to match the reference layout: logo far-left, nav links
   evenly spread with a hamburger far-right, huge fire wordmark, then a
   single full-width info row of top-aligned columns
   (location | services | description | year).
   ===================================================================== */
@media (min-width: 1200px) {

  /* .inner-hero (style.css) carries padding-top:70px which, stacked on top
     of the nav's own padding, pushed the whole nav row ~150px down from the
     top. Collapse it so the nav sits right at the top like the reference. */
  .inner-hero {
    margin-top: 0;
    padding-top: 0;
  }

  /* ---- NAV: desktop spacing (flex row + hamburger itself are global) ---- */
  .nav-bar {
    gap: 40px;
    margin: 0;
    padding: 24px 48px;
  }
  .image-2 {
    width: 108px;
    height: auto;
  }
  .link-3,
  .link-4,
  .link-5,
  .link-6 {
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  /* ---- HERO INFO ROW: one full-width row, columns top-aligned ----
     .hero-container is position:absolute with no width, so it collapses to
     its content (~1121px) and the year never reaches the edge. Stretch it. */
  .hero-container {
    left: 0;
    right: 0;
    width: 100%;
    padding-left: 48px;
    padding-right: 48px;
  }
  .div-block-2 {
    width: 100%;                      /* stretch the row full-width so the
                                         year column reaches the right edge */
    align-items: flex-start;          /* was center -> top-align location */
  }
  .div-block-3 {
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    margin-left: 72px;
  }
  .block-quote {
    padding-right: 0;
  }
  .div-block {
    gap: 6px;
  }
  .link-2 {
    line-height: 1.4;
  }
  /* description column: drop the big desktop margins so it sits in-column */
  .div-block-5 {
    margin-left: 0;
  }
  .paragraph {
    margin: 0;
    padding: 0;
    max-width: 430px;
  }
  .paragraph-2 {
    margin: 14px 0 0;
    padding: 0;
    max-width: 430px;
  }
  .text-block {
    padding: 0;
  }
  .div-block-6 {
    margin: 0;                        /* remove the -100px desktop offset */
  }

  /* ---- ABOUT: compact portrait image + 3-column copy row ----
     Below 1200px, style.css's own tier already stacks this (image full
     width, above the text). At this width the reference keeps it a single
     row: image | copy+button | copy | year. */
  .div-block-26 {
    max-width: 260px;
    aspect-ratio: 3 / 4;
  }
  .div-block-26 + div {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 40px;
    min-width: 0;
  }
  .div-block-27 {
    max-width: 320px;
  }
  .paragraph-4 {
    max-width: 260px;
  }
  .paragraph-5 {
    margin-left: auto;   /* pins the year to the far right of the row */
  }
  .heading,
  .heading-2 {
    font-size: 50px;
    line-height: 1.15;
  }

  /* ---- PROJECTS: undo the negative-margin canvas hack (only active
     above 1200px -- style.css's own tier already zeroes it below that) ---- */
  .project-single-card {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =====================================================================
   TABLET  —  max-width: 991px
   ===================================================================== */
@media (max-width: 991px) {

  /* Nav links collapse behind the hamburger from tablet down — reference
     shows only the logo + hamburger below desktop width. */
  .link-3,
  .link-4,
  .link-5,
  .link-6 {
    display: none;
  }
  .nav-bar {
    padding: 20px 32px;
  }

  /* Hero wordmark — "MONARK STUDIO" is a PNG (.image), not text, so it
     scales by width rather than font-size. This is the ~72px-heading tier. */
  .image {
    width: 100%;
    height: auto;
    max-height: none;
    margin: 16px 0 0;
  }

  /* Hero info row: location already stacks above (style.css's own ≤1200
     tier turns .div-block-2 into a column), but the reference keeps
     services / description / year as one row underneath it — not fully
     stacked — until mobile. Re-flex .div-block-3 back to a row here. */
  .hero-container {
    padding-left: 32px;
    padding-right: 32px;
  }
  .div-block-3 {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    margin-left: 0;
  }
  .div-block-5 {
    flex: 1;
    max-width: 380px;
    margin-left: 0;
  }
  .div-block-6 {
    margin: 0;
  }
  .paragraph,
  .paragraph-2 {
    font-size: 15px;
  }

  /* About: heading steps down; image+copy already stack via style.css's
     own ≤1200 tier (full-width image above the copy). */
  .heading,
  .heading-2 {
    font-size: 40px;
    line-height: 1.2;
  }

  /* Services section: row flex -> vertical column stack */
  .services-section {
    flex-direction: column;
    gap: 48px;
  }
  .services-left {
    position: static;   /* drop desktop sticky */
    top: auto;
    width: 100%;
  }

  /* Project cards: image full width, cards stack vertically */
  .project-single-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
  }
  .psc-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .psc-img {
    height: 100%;
    object-fit: cover;
    margin: 0;
  }

  /* Pricing cards wrapper: stack vertically, gap 24px */
  .div-block-33 {
    flex-direction: column;
  }
  .div-block-34 {
    grid-template-columns: 1fr;
    gap: 24px;
    width: auto;
  }
  .div-1,
  .div-block-47 {
    margin-bottom: 0;
  }

  /* FAQ: unstick the left sidebar, stack left + right vertically */
  .faq-section {
    flex-direction: column;
    gap: 48px;
  }
  .faq-left {
    position: static;
    top: auto;
    width: 100%;
  }

  /* Process grid: 3 -> 2 columns */
  .process-grid {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 40px;
  }

  /* Footer top row: stack vertically, gap 40px */
  .footer-top-row {
    flex-direction: column;
    gap: 40px;
  }

  /* CTA flanking columns: smaller type + tighter gap */
  .cta-columns-row {
    gap: 24px;
    margin-top: -180px;
  }
  .cta-col-label {
    font-size: 12px;
  }
  .cta-col-link {
    font-size: 14px;
  }
}


/* =====================================================================
   MOBILE LANDSCAPE  —  max-width: 767px
   Transitional tier that bridges tablet -> portrait.
   ===================================================================== */
@media (max-width: 767px) {

  .nav-bar {
    padding: 20px 24px;
  }

  /* About: heading steps down further for the mobile stack. */
  .heading,
  .heading-2 {
    font-size: 30px;
    line-height: 1.25;
  }

  /* Projects: "[04]" steps down with the heading-4 tier above so the two
     keep fitting on one line instead of wrapping. */
  .div-block-30 + div {
    gap: 10px;
  }
  .heading-5 {
    font-size: 42px;
  }

  /* Hero info row: fully stacked from here down. The reference moves the
     copyright/year line to sit right after the location line — above the
     services list — even though it's the last child of .div-block-3 in the
     markup, so pull it to the front with flex `order` (CSS-only, no HTML
     change). Type also steps up in size for a readable mobile stack. */
  .hero-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .div-block-3 {
    flex-direction: column;
    gap: 20px;
    margin-left: 0;
  }
  .div-block-6 {
    order: -1;
    margin: 0;
  }
  .div-block {
    gap: 10px;
  }
  .block-quote {
    font-size: 14px;
  }
  .link-2 {
    font-size: 15px;
    line-height: 1.3;
  }
  .paragraph,
  .paragraph-2 {
    font-size: 15px;
    line-height: 1.5;
  }
  .text-block {
    font-size: 13px;
  }

  /* "LET'S TALK" card: below tablet the reference switches it from a
     compact bottom-right anchor to a near-full-width bottom bar. */
  .div-block-15 {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }

  /* Section padding step-down */
  .services-section,
  .process-section,
  .faq-section,
  .cta-section,
  .pricing-section,
  .section-4,
  .footer-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Type step-downs */
  .service-title { font-size: 40px; }
  .cta-headline  { font-size: 56px; }
  .faq-question  { font-size: 20px; }

  /* Process grid collapses to a single column here */
  .process-grid {
    grid-template-columns: 1fr;
  }
  .process-card {
    border-left: none;
    border-top: 1px solid #333;
    padding-left: 0;
  }

  /* CTA columns move below the image and stack */
  .cta-columns-row {
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
  }
}


/* =====================================================================
   MOBILE PORTRAIT  —  max-width: 479px   (highest priority)
   ===================================================================== */
@media (max-width: 479px) {

  /* --- Hero wordmark: "MONARK STUDIO" ---
     Image, not text — scaled by width to read like a ~38px heading. */
  .image {
    width: 100%;
    height: auto;
    line-height: 1;
    margin: 12px 0 0;
  }

  /* Hero info row: inset tightens further at this width (layout/sizing
     itself is inherited from the ≤767 tier above). */
  .hero-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nav-bar {
    padding: 20px 20px;
  }
  .div-block-2 {
    gap: 8px;
  }
  .div-block-3 {
    gap: 16px;
  }

  /* Projects: heading-4 drops to 46px at this tier (style.css); shrink
     "[04]" further and tighten the gap so it keeps fitting on one line. */
  .div-block-30 + div {
    gap: 6px;
  }
  .heading-5 {
    font-size: 28px;
  }

  .div-block-15 {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  /* Global section padding */
  .services-section,
  .process-section,
  .faq-section,
  .cta-section,
  .pricing-section,
  .section-4 {
    padding: 60px 24px;
  }
  /* Projects uses a bare Webflow .w-container (no side padding), so its
     heading + cards touch the edge. Give it the 20px minimum gutter.
     (About/pricing use .container-2/-3, which already pad 20px.) */
  #projects .w-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Services: hide the left sidebar entirely, show only service rows */
  .services-left {
    display: none;
  }
  .service-title {
    font-size: 36px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Drop the decorative row thumbnail on portrait: its fixed 64px width +
     the number/arrow/gaps push the 36px title past a 360-390px viewport,
     causing a few px of horizontal scroll. Removing it keeps the title at
     the requested 36px and leaves a clean number + title + description row. */
  .service-thumb {
    display: none;
  }

  /* Project cards: full width, fixed 240px cover image */
  .psc-img-wrap {
    width: 100%;
    height: 240px;
    aspect-ratio: auto;
  }
  .psc-img {
    height: 100%;
    object-fit: cover;
  }

  /* Pricing cards: stacked, full width, 24px padding */
  .div-block-34 {
    grid-template-columns: 1fr;
  }
  .div-1,
  .div-block-47 {
    width: 100%;
    padding: 24px;
  }
  /* keep the pricing headline from overflowing its huge desktop padding,
     and close the big empty gap before the cards */
  .heading-6 {
    padding: 0 0 16px;
    margin-bottom: 16px;
  }
  .div-block-31 {
    padding-top: 8px;   /* was 24px */
  }
  .div-block-33 {
    margin-top: 24px;   /* was 70px — the main gap before the cards */
  }

  /* CTA */
  .cta-headline {
    font-size: 48px;
  }
  /* PAGES / FOLLOW ON flanking columns: hidden on mobile */
  .cta-columns-row {
    display: none;
  }
  .cta-center-img-wrap {
    width: 240px;
    height: 320px;
    aspect-ratio: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Process grid: single column */
  .process-grid {
    grid-template-columns: 1fr;
  }

  /* FAQ items */
  .faq-question {
    font-size: 18px;
  }

  /* Footer: stack all columns, centered, tighter padding */
  .footer-section {
    padding: 40px 24px;
  }
  .footer-top-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  .footer-brand-col,
  .footer-col {
    align-items: center;
    max-width: 100%;
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}


/* =====================================================================
   PRICING TOGGLE — monthly / annual switch (not breakpoint-specific)
   The click handler lives in js/main.js (no Webflow IX2 runtime is
   included in this export, so the toggle had no behavior at all before).
   .div-block-41's base rule is width:60px with padding:2px 61px 2px 0 --
   padding-right larger than the box itself, which was clearly never a
   deliberate track size. Replace it with a normal 44px pill so the knob
   has a real, calculable range to slide across.
   ===================================================================== */
.div-block-41 {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  transition: background-color 0.25s ease;
}
.div-block-42 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  transition: left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.div-block-40.is-annual .div-block-41 {
  background-color: #fff;
}
.div-block-40.is-annual .div-block-42 {
  left: 22px;
  background-color: #000;
}
.text-block-7,
.text-block-8 {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}
.text-block-7.is-active,
.text-block-8.is-active {
  opacity: 1;
}