/* Hero: photo backdrop + two-column headline/CTA layout.
   Tokens lifted from the live site: Roboto Mono for UI/mono text, muted #b3b3b3,
   accent #0099ff, uppercase mono buttons. */

/* Removed marketing sections (homepage only — this file loads only on the
   homepage, so the work/* detail pages' own "Work" sections are unaffected):
   - Work        = "Featured Cases"
   - Testimonial = "Trusted by International Brands"
   - Pricing     = "Big or Small? I have a plan."
   Hidden rather than deleted from the chunk, so hydration can't re-add them. */
.framer-body #main section[data-framer-name="Work"],
.framer-body #main section[data-framer-name="Testimonial"],
.framer-body #main section[data-framer-name="Pricing"],
section[data-framer-name="Work"],
section[data-framer-name="Testimonial"],
section[data-framer-name="Pricing"] {
  display: none !important;
}

/* Brand ticker (Clients section) — new logos, half size, closer, narrower
   centered band, edge fade.
   IMPORTANT: sizing must target each logo div by its data-framer-name, NOT by
   class — every original logo has its OWN class (xbox=framer-5nxlzo,
   amd=framer-jm4jr7, ...), so a single class rule only fixed xbox+its clones
   and left the other 6 at background-size:100% 100% (stretched). */
section[data-framer-name="Clients"] [data-framer-name="xbox-svgrepo-com"],
section[data-framer-name="Clients"] [data-framer-name="amd-svgrepo-com 1"],
section[data-framer-name="Clients"] [data-framer-name="airbus-svgrepo-com 1"],
section[data-framer-name="Clients"] [data-framer-name="hbo-svgrepo-com"],
section[data-framer-name="Clients"] [data-framer-name="bose-svgrepo-com"],
section[data-framer-name="Clients"] [data-framer-name="applepay-svgrepo-com 1"],
section[data-framer-name="Clients"] [data-framer-name="activision-svgrepo-com 1"],
section[data-framer-name="Clients"] [data-framer-name="logo-8"],
section[data-framer-name="Clients"] [data-framer-name="logo-9"],
section[data-framer-name="Clients"] [data-framer-name="logo-10"] {
  width: 186px !important;
  height: 90px !important;
  background-size: contain !important;   /* never stretch, all 10 */
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.92 !important;
}

/* Logo N wrappers match the logo width. */
section[data-framer-name="Clients"] [data-framer-name="Logo 1"],
section[data-framer-name="Clients"] [data-framer-name="Logo 2"],
section[data-framer-name="Clients"] [data-framer-name="Logo 3"],
section[data-framer-name="Clients"] [data-framer-name="Logo 4"],
section[data-framer-name="Clients"] [data-framer-name="Logo 5"],
section[data-framer-name="Clients"] [data-framer-name="Logo 6"],
section[data-framer-name="Clients"] [data-framer-name="Logo 7"],
section[data-framer-name="Clients"] [data-framer-name="Logo 8"],
section[data-framer-name="Clients"] [data-framer-name="Logo 9"],
section[data-framer-name="Clients"] [data-framer-name="Logo 10"] {
  width: 186px !important;
  min-width: 186px !important;
}

/* Closer together (track gap was 140px). */
section[data-framer-name="Clients"] ul {
  gap: 14px !important;
}

/* Not full screen width: narrow, centered band + fade at both ends. */
section[data-framer-name="Clients"] section {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
          mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
}

section[data-framer-name="Clients"] [data-framer-name="xbox-svgrepo-com"]      { background-image: url(/_custom/logos/1.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="amd-svgrepo-com 1"]     { background-image: url(/_custom/logos/2.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="airbus-svgrepo-com 1"]  { background-image: url(/_custom/logos/3.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="hbo-svgrepo-com"]       { background-image: url(/_custom/logos/4.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="bose-svgrepo-com"]      { background-image: url(/_custom/logos/5.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="applepay-svgrepo-com 1"]{ background-image: url(/_custom/logos/6.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="activision-svgrepo-com 1"] { background-image: url(/_custom/logos/7.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="logo-8"]  { background-image: url(/_custom/logos/8.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="logo-9"]  { background-image: url(/_custom/logos/9.png) !important; }
section[data-framer-name="Clients"] [data-framer-name="logo-10"] { background-image: url(/_custom/logos/10.png) !important; }

/* Footer giant name: "LANDON DURM" is wider than the original "GUETABERTO" and
   overran the viewport (~196px past the right edge, M clipped). Shrink it via
   Framer's own font-size variable so it fits on one line without page scroll.
   210px -> 180px, line-height kept proportional (170 -> 146). */
/* Footer name was demoted from <h1> to <div> (one-h1 SEO), so this now targets
   the .framer-text element rather than the tag. */
section[data-framer-name="Footer Text"] h1,
section[data-framer-name="Footer Text"] .framer-text {
  --framer-font-size: 180px !important;
  --framer-line-height: 146px !important;
}

/* ---------------------------------------------------------------------------
   1. The hero becomes the stage for the photo that used to sit below it.
   --------------------------------------------------------------------------- */

section[data-framer-name="Hero"] {
  position: relative;
  min-height: 100vh;
  height: auto !important;       /* min-height is a floor — let the hero grow past 100vh */
  overflow: visible !important;  /* never clip the CTA / SUBSCRIBE button at the bottom */
  justify-content: flex-start;   /* stacked content is ~viewport-tall; centering clipped the top behind the header */
  background: #000;   /* left panel is solid black; the photo moves to the right-half ::before panel */
}

/* Was the readability scrim (no longer needed — no text over the photo now).
   Repurposed as the right-half photo panel, full-bleed. */
section[data-framer-name="Hero"]::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 50%;   /* right half, edge-to-edge */
  z-index: 0;
  pointer-events: none;
  background-image: url("/_external/framerusercontent.com/images/Dqh3FA7ENXaHQxWUEi11hFrOF5Y.png");
  background-size: cover;
  background-position: 58% 30%;   /* keep the face in the narrower panel — adjust if off */
  background-repeat: no-repeat;
}

section[data-framer-name="Hero"] > * {
  position: relative;
  z-index: 1;
}

/* Framer reveals these on scroll progress. With the hero now full-height its
   content starts below the trigger range, so at scroll 0 the name and the
   footer row stayed invisible. A hero has to read on load — pin them visible.
   Scoped to the hero; the rest of the site keeps its reveal animations. */
section[data-framer-name="Hero"] [data-framer-appear-id] {
  opacity: 1 !important;
  transform: none !important;
}

/* Rebalance: the original 210px spacer left dead space up top once the hero
   grew to full height. */
section[data-framer-name="Hero"] [data-framer-name="Spacer"] {
  height: 140px !important;   /* top clearance below the fixed header now that content top-aligns */
}

/* The standalone scroll-zoom section is redundant now that it backs the hero. */
section[data-framer-name="Zoom Image"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   2. Headline (tagline + name) on the left, sub-headline + capture on the right.
   Grid rather than DOM restructuring, so Framer's re-renders leave it intact.
   --------------------------------------------------------------------------- */

section[data-framer-name="Hero"] [data-framer-name="Title & Heading"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);   /* single stacked column: name block on top, CTA below */
  grid-template-rows: auto auto;
  row-gap: 6px;
  align-items: start;
  width: 50%;                 /* left panel */
  max-width: none;
  margin: 0;
  align-self: flex-start;     /* left edge, not centered */
  padding: 0 56px 96px 96px;  /* comfortable inner padding: L96 / R56 / B96 */
  box-sizing: border-box;
}

/* Keep both bottom corner lines inside the black left panel (no text over the photo). */
section[data-framer-name="Hero"] [data-framer-name="Bottom"] {
  width: 50% !important;
  box-sizing: border-box !important;
}

section[data-framer-name="Hero"] [data-framer-name="Headline"] {
  grid-column: 1;
  grid-row: 1;
}

section[data-framer-name="Hero"] [data-framer-name="Title"] {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  align-items: flex-start !important;
  text-align: left !important;
  /* Was -58px, tuned for the old 2-col CTA row-span (grid-row:1/span 2) that
     stretched rows 1-2. Stacked, the CTA is in row 3 and no longer stretches
     those rows, so -58px over-pulled the name up over the tag. */
  margin-top: 0;
}

/* Let the name box shrink to the smaller type instead of Framer's fixed
   text-wrapper height, so the reduced font actually reclaims vertical space. */
section[data-framer-name="Hero"] [data-framer-name="Title"],
section[data-framer-name="Hero"] [data-framer-name="Title"] > *,
section[data-framer-name="Hero"] [data-framer-name="Title"] h1 {
  height: auto !important;
  min-height: 0 !important;
}

/* Left-aligned and fluid, so the name can't overflow the narrower column. */
section[data-framer-name="Hero"] [data-framer-name="Title"] h1 {
  font-size: clamp(48px, 6.5vw, 140px) !important;   /* fills the ~half-width column; wraps to LANDON / DURM */
  line-height: 0.82 !important;
  text-align: left !important;
}

#landon-hero-cta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  max-width: 520px;
  margin-top: 64px;   /* real breathing room between the name and the text block */
  display: flex;
  flex-direction: column;
  gap: 40px;          /* copy block -> form */
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

#landon-hero-cta .lhc-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#landon-hero-cta .lhc-copy p {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Three weights of voice: intro reads brightest, proof carries the numbers,
   offer recedes slightly so the eye lands on the field below it. */
#landon-hero-cta .lhc-lead {
  font-size: 17.5px;
  line-height: 1.65;
  color: #e8e8e8;
}

#landon-hero-cta .lhc-proof {
  font-size: 16.5px;
  line-height: 1.7;
  color: #cfcfcf;
  padding-left: 14px;
  border-left: 2px solid rgba(0, 153, 255, 0.55);
}

#landon-hero-cta .lhc-offer {
  font-size: 15.5px;
  line-height: 1.7;
  color: #fff;
}

/* This paragraph is all white now, so 700 alone no longer separates the offer
   from its surroundings. Roboto Mono ships only 400 and 700 here — a heavier
   font-weight would render identically — so the extra weight comes from
   stroking the glyphs. */
#landon-hero-cta .lhc-offer strong {
  -webkit-text-stroke: 0.5px #fff;
  letter-spacing: 0.4px;
}

#landon-hero-cta .lhc-copy strong {
  font-weight: 700;
  color: #fff;
}

#landon-hero-cta .lhc-copy em {
  font-style: italic;
  color: #d8d8d8;
}

/* The money figures are the reason to keep reading — give them the accent. */
#landon-hero-cta .lhc-copy strong.lhc-num {
  color: #0099ff;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------------------
   3. Email capture.
   --------------------------------------------------------------------------- */

#landon-hero-cta .lhc-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#landon-hero-cta .lhc-label {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a0a0a0;
  margin-bottom: 18px;
}

#landon-hero-cta .lhc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 21px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f0f0f0;
  outline: none;
  transition: border-color 0.2s ease;
}

#landon-hero-cta .lhc-input::placeholder {
  color: #7a7a7a;
  text-transform: uppercase;
}

#landon-hero-cta .lhc-input:focus {
  border-bottom-color: #0099ff;
}

/* Chamfered top-left / bottom-right corners, echoing the site's angular buttons. */
#landon-hero-cta .lhc-button {
  display: block;
  width: 100%;
  padding: 11px 24px;
  background: rgba(20, 20, 22, 0.92);
  border: 0;
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  font-family: "Roboto Mono", monospace;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

#landon-hero-cta .lhc-button:hover {
  background: #fff;
  color: #000;
}

#landon-hero-cta .lhc-status {
  margin: 0;
  min-height: 18px;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0099ff;
}

#landon-hero-cta .lhc-status.is-error {
  color: #ff5a5a;
}

/* ---------------------------------------------------------------------------
   4. Load-in.

   Modelled on Motion's entrance recipe — opacity [0,1] with a small y rise and
   a ~80ms stagger — but expressed as CSS animations rather than the library.
   Two reasons: Framer's own Motion instance already owns these nodes, and
   `animation: ... both` settles on the visible state on its own, so the hero
   can never end up blank if a script fails.

   Note these run on the *parents* of Framer's [data-framer-appear-id] nodes.
   Those are pinned with `!important` above, and author !important beats
   animations in the cascade, so animating them directly would do nothing.
   --------------------------------------------------------------------------- */

@keyframes lhcRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lhcRiseLg {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lhcVeil {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Photo resolves out of black while the type rises over it. Sits above the
   background but below content, which is z-index 1. */
section[data-framer-name="Hero"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
  animation: lhcVeil 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

section[data-framer-name="Hero"] [data-framer-name="Headline"],
section[data-framer-name="Hero"] [data-framer-name="Left"],
section[data-framer-name="Hero"] [data-framer-name="Right"],
#landon-hero-cta .lhc-copy p,
#landon-hero-cta .lhc-form > * {
  animation: lhcRise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

section[data-framer-name="Hero"] [data-framer-name="Title"] {
  animation: lhcRiseLg 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

section[data-framer-name="Hero"] [data-framer-name="Headline"] { animation-delay: 120ms; }
section[data-framer-name="Hero"] [data-framer-name="Title"]    { animation-delay: 220ms; }

/* Must out-specify `#landon-hero-cta .lhc-copy p` above (1,1,1) — the shorthand
   there resets animation-delay, so a (1,1,0) selector would be silently ignored. */
#landon-hero-cta .lhc-copy p.lhc-lead  { animation-delay: 320ms; }
#landon-hero-cta .lhc-copy p.lhc-proof { animation-delay: 400ms; }
#landon-hero-cta .lhc-copy p.lhc-offer { animation-delay: 480ms; }

#landon-hero-cta .lhc-form > *:nth-child(1) { animation-delay: 560ms; }
#landon-hero-cta .lhc-form > *:nth-child(2) { animation-delay: 640ms; }
#landon-hero-cta .lhc-form > *:nth-child(3) { animation-delay: 700ms; }

section[data-framer-name="Hero"] [data-framer-name="Left"]  { animation-delay: 720ms; }
section[data-framer-name="Hero"] [data-framer-name="Right"] { animation-delay: 780ms; }

@media (prefers-reduced-motion: reduce) {
  section[data-framer-name="Hero"]::after,
  section[data-framer-name="Hero"] [data-framer-name="Headline"],
  section[data-framer-name="Hero"] [data-framer-name="Title"],
  section[data-framer-name="Hero"] [data-framer-name="Left"],
  section[data-framer-name="Hero"] [data-framer-name="Right"],
  #landon-hero-cta .lhc-copy p,
  #landon-hero-cta .lhc-form > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  section[data-framer-name="Hero"]::after { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   5. Stack section — card [1] logo lockup.

   The card's Icon slot is a fixed 28x28 with overflow:hidden and object-fit:
   cover, which is right for a square award mark but would center-crop a
   6.33:1 two-logo lockup down to a 28px slice. Widen just this one card's
   slot (targeted via its now-unique href) and switch to contain so both
   marks stay whole. 1265x200 at 28px tall = 177px.
   --------------------------------------------------------------------------- */

/* Per-card slot width = lockup aspect ratio × the 28px row height. */
section[data-framer-name="Awards"] a[href="https://nextjs.org"]             [data-framer-name="Icon"] { width: 177px !important; } /* 1265x200 */
section[data-framer-name="Awards"] a[href="https://supabase.com"]           [data-framer-name="Icon"] { width: 179px !important; } /* 1276x200 */
section[data-framer-name="Awards"] a[href="https://vercel.com"]             [data-framer-name="Icon"] { width: 213px !important; } /* 1524x200 */
section[data-framer-name="Awards"] a[href="https://claude.com/claude-code"] [data-framer-name="Icon"] { width:  62px !important; } /*  440x200 */

/* Shared: fill the widened slot and contain rather than cover, so neither
   mark in a lockup gets cropped. */
section[data-framer-name="Awards"] [data-framer-name="Icon"] > div,
section[data-framer-name="Awards"] [data-framer-name="Icon"] img {
  width: 100% !important;
}

section[data-framer-name="Awards"] [data-framer-name="Icon"] img {
  object-fit: contain !important;
  object-position: left center !important;
}

/* ---------------------------------------------------------------------------
   6. Narrow viewports: collapse to a single column, CTA below the name.
   --------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* Split collapses: photo becomes a full-width top banner, content stacks below on black. */
  section[data-framer-name="Hero"]::before {
    top: 0; left: 0; right: 0; bottom: auto;
    height: 42vh;
    background-position: 55% 25%;
  }
  section[data-framer-name="Hero"] [data-framer-name="Spacer"] {
    height: 42vh !important;   /* reserve the banner area above the content */
  }
  section[data-framer-name="Hero"] [data-framer-name="Title & Heading"] {
    width: 100% !important;
    align-self: stretch !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding: 32px 24px 48px !important;
  }
  section[data-framer-name="Hero"] [data-framer-name="Bottom"] {
    width: 100% !important;
  }
  #landon-hero-cta {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 520px;
    margin-top: 0;
  }
}

/* Framer's own Hero section is hidden — the homepage hero is now the native
   markup injected before #main (see hero.css). The old hero rules above are inert
   (they target this now-hidden element); left in place to avoid risk to the adjacent
   Clients / Awards / Footer rules. */
section[data-framer-name="Hero"] { display: none !important; }