@import url("style-v3a.css?v=2");

/* ============================================================
   ENVELOP + WIDE COLUMN 1280 (w2)
   Same envelop helix, but a wider 1280px shared column —
   airy, editorial. More room for the headline to fall on
   fewer lines, and pillars get wider columns so
   descriptions don't wrap mid-phrase.
   ============================================================ */

.page{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(28px, 3.4vw, 52px);
}

.hero{
  max-width: none;
  width: 100%;
  align-self: center;
  justify-self: stretch;
  padding-left: 0;
  padding-right: 0;
}

/* Backdrop glow scaled to match wider hero */
.hero::before{
  inset: -56px -5%;
}

/* Subheading gets a longer measure — still within the
   readable 55-70 char range */
.headline-sub{
  max-width: 62ch;
}

/* Headline gets a subtle bump at the wider breakpoint so
   the column still feels "filled" rather than floaty */
.headline{
  font-size: clamp(32px, 3.9vw, 64px);
}

/* ============================================================
   RESPONSIVE — three coordinated breakpoints below 1024px.
   The base rules above target desktop (>1024px). These
   stepped media queries preserve the envelop atmosphere
   (centered helix, backdrop glow, italic rotator) at every
   size without the layout falling apart.
   ============================================================ */

/* ---------- Laptop / small desktop: 1024px and below ----------
   Column drops the hard cap so the content still fills the
   viewport with breathing padding on each side. */
@media (max-width: 1024px){
  .page{
    max-width: none;
    padding-inline: clamp(22px, 4vw, 40px);
  }
  .headline{
    font-size: clamp(32px, 5.6vw, 52px);
  }
  .headline-sub{
    max-width: none;
    font-size: clamp(15px, 1.8vw, 17px);
  }
}

/* ---------- Tablet / large phone: 768px and below ----------
   Page switches to a scrollable document (unlocks body+html
   height), grid rows relax to auto so stacked pillars can
   grow, helix backdrop softens so it doesn't dominate
   the narrower composition. */
@media (max-width: 768px){
  html, body{
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .page{
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto auto;
    gap: clamp(20px, 4vw, 32px);
    padding-block: clamp(16px, 3vw, 28px);
  }
  .hero{
    align-self: start;
    padding-top: clamp(12px, 3vw, 24px);
  }
  .hero::before{
    inset: -24px -4%;
    filter: blur(12px);
  }
  .headline{
    font-size: clamp(30px, 7vw, 44px);
    line-height: 1.12;
  }
  .eyebrow{
    margin-bottom: clamp(6px, 1.2vw, 10px);
  }
  /* Helix feels less dominant in narrow composition — drop
     opacity so text stays the focal point */
  #helix{ opacity: 0.4; }
  #vignette{
    background:
      radial-gradient(80% 70% at 50% 50%,
        oklch(from var(--bg) calc(l - 0.02) c h / 0.5) 0%,
        transparent 45%,
        oklch(from var(--bg) calc(l - 0.08) c h) 100%);
  }
}

/* ---------- Phone: 480px and below ----------
   CTA button must not wrap. Email address in footer uses
   tabular breakable form. Topbar email stays visible but
   at reduced tracking so it fits beside the logo. */
@media (max-width: 480px){
  /* CTA keeps its label on one line */
  .cta{
    white-space: nowrap;
    padding: 14px 18px;
    font-size: 11px;
  }
  .cta-row{
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
  }
  .cta-email{
    /* Allow break before "@" if needed, avoid overflow */
    word-break: break-all;
    font-size: 13px;
  }

  /* Topbar — tighten spacing so talent@ + logo both fit */
  .topbar{
    gap: 10px;
  }
  .contact{ gap: 0; }
  .topbar .contact-link{
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .l03{ font-size: 22px; }
  .l03-sub{ font-size: 9px; letter-spacing: 0.22em; }

  /* Eyebrow: allow it to wrap gracefully instead of
     squishing the line */
  .eyebrow{
    flex-wrap: wrap;
    gap: 10px;
  }
  .eyebrow-line{ width: 22px !important; }
  .eyebrow-text{ font-size: 10px; letter-spacing: 0.16em; }

  /* Headline keeps a floor size so italic rotator still
     reads clearly */
  .headline{
    font-size: clamp(28px, 8vw, 36px);
  }
  .headline-sub{
    font-size: 14px;
    line-height: 1.5;
  }

  /* Footer stacks cleanly and centers */
  .footer{
    font-size: 10px;
  }
  .footer .foot-c{ letter-spacing: 0.1em; }

  /* Pillar meta becomes two-line on very narrow screens
     rather than wrapping mid-word */
  .pillar-meta{
    flex-wrap: wrap;
  }
}

/* ---------- Small phone: 360px and below ----------
   Keep logo visible, hide the email text in topbar (a
   11px string gets squeezed out by 320px). LinkedIn
   link stays hidden from the base 900px rule. */
@media (max-width: 360px){
  .topbar .contact-link:first-child .contact-dot{ display: none; }
  .topbar .contact-link:first-child{
    /* Reduce to just the @ domain to save space */
    font-size: 10px;
  }
  .page{
    padding-inline: 16px;
  }
}