/* ==========================================================================
   responsive.css — breakpoints
   Loaded last, so these rules win over the same-specificity defaults.
   ========================================================================== */

/* ==========================================================================
   <= 1024px — tablet
   ========================================================================== */
@media (max-width: 1024px) {

  /* the CTA stays. Only the arrow goes, to buy back width for the burger */
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__cta { padding: 9px 14px; }
  .nav__cta .ico { display: none; }
  .nav__inner { padding-left: 14px; }
  /* nothing narrows on touch: animating max-width while a blurred layer is
     composited is the one combination that drops frames on iOS */
  .nav.scrolled .nav__inner { max-width: var(--wrap); }

  .section { padding-block: 88px; }

  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .skills__grid { grid-template-columns: repeat(2, 1fr); }

  .process { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .process__step { border-left: 1px solid var(--hair-d); }
  .process__step:nth-child(odd) { border-left: 0; padding-left: 0; }

  .contact__layout { grid-template-columns: 1fr; gap: 44px; }

  .tl-item__card {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 18px;
  }
  .tl-item__meta,
  .tl-item__role,
  .tl-item__org,
  .tl-item__list,
  .tl-item__scope,
  .tl-item__foot { grid-column: 1; grid-row: auto; }
  .tl-item__scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .tl-item__meta { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .tl-item__org { margin-bottom: 0; }
  .tl-item__role { margin-bottom: 0; }

  .approach .section-head { max-width: 100%; }

  .section-head--row { flex-direction: column; align-items: flex-start; }

  .hero__inner { column-gap: 32px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .hero__photo { width: clamp(380px, 50%, 620px); }
}

/* ==========================================================================
   <= 860px — small tablet / large phone
   ========================================================================== */
@media (max-width: 860px) {

  .work__grid { grid-template-columns: 1fr; }

  .stats__card {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 0;
    padding-block: 36px;
  }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--hair); padding-bottom: 26px; }

  .pcard--feature .device { width: 224px; height: 464px; }

  .footer__top { flex-direction: column; gap: 26px; }
  .footer__nav { max-width: none; }
}

/* ==========================================================================
   <= 700px — phone
   ========================================================================== */
@media (max-width: 700px) {

  .nav { padding-inline: 16px; }
  .nav__inner { padding: 0 6px 0 12px; gap: 10px; }
  .mobnav { left: 16px; right: 16px; }
  .brand { font-size: 13px; gap: 7px; }
  .brand__mark { width: 22px; height: 22px; }
  .nav__cta { font-size: 12px; padding: 8px 13px; }
  .burger { width: 38px; height: 38px; }
  .burger span { left: 11px; }
  .burger span:nth-child(1) { top: 14px; }
  .burger span:nth-child(2) { top: 18.5px; }
  .burger span:nth-child(3) { top: 23px; }

  :root { --gutter: 20px; }

  .section { padding-block: 68px; }

  /* the subject moves behind the copy as a full-panel backdrop, since at
     phone width there is no room for a side-by-side split */
  .hero { text-align: center; min-height: 0; }
  /* the header floats over the hero now, so the copy has to start below it */
  .hero__inner { grid-template-columns: 1fr; justify-items: center; padding-block: calc(var(--nav-h) + 34px) 0; }
  .hero__copy { max-width: 100%; }
  .hero__sub { margin-inline: auto; }
  .hero__photo {
    position: relative;
    inset: auto;
    width: min(440px, 92vw);
    margin: 32px auto 0;
    height: auto;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--dark);
  }
  /* the photo fades straight to this solid dark background near its own
     edges (below) */
  .hero__photo picture { position: relative; z-index: 1; display: block; }
  .hero__photo img {
    position: relative;
    z-index: 1;
    height: auto;
    object-fit: contain;
  }
  /* on the phone layout the photo sits as its own card rather than
     bleeding to the section edge, so fade its border into the dark
     hero background instead of leaving a hard rectangular cutout.
     Rectangular (not radial) fades on purpose — a round/oval gradient
     doesn't match this photo's tall proportions and shows up as a
     visible dark blob instead of a clean, even blend. */
  .hero__photo::after {
    display: block;
    z-index: 2;
    background:
      linear-gradient(180deg,
        var(--dark) 0%,
        rgba(16, 16, 20, 0) 10%,
        rgba(16, 16, 20, 0) 90%,
        var(--dark) 100%),
      linear-gradient(90deg,
        var(--dark) 0%,
        rgba(16, 16, 20, 0) 10%,
        rgba(16, 16, 20, 0) 90%,
        var(--dark) 100%);
  }

  .stats { margin-top: -40px; }
  .stats__card { padding: 24px 16px; }
  .tech { padding-block: 24px 76px; border-top: 1px solid var(--hair-d); }
  .hero__badge { font-size: 13px; flex-wrap: wrap; justify-content: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__cv { justify-content: center; }
  .tech__label { text-align: center; }
  .tech__row { justify-content: center; }

  .tl-item__scope { grid-template-columns: 1fr; gap: 20px; }

  .svc__grid { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: 1fr; }

  /* the labels are short enough to hold two columns; stacking all seven made
     the block twice as tall as the CTA it is supporting */
  .cta-caps__list { gap: 11px 16px; font-size: 14px; }
  .cta-caps__list li { font-size: 14px; }

  .svc__note { flex-direction: column; align-items: flex-start; }
  .svc__note .btn { width: 100%; }

  .process { grid-template-columns: 1fr; row-gap: 0; }
  .process__step {
    border-left: 0;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--hair-d);
    margin-bottom: 24px;
  }
  .process__step:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

  .field__row { grid-template-columns: 1fr; gap: 0; }
  .field__row > div { margin-bottom: 16px; }

  .form { padding: 26px; }
  .tl-item__card { padding: 26px; }
  .edu__strip { flex-direction: column; align-items: flex-start; gap: 16px; }
  .edu__strip-items { gap: 20px; flex-direction: column; }

  .device { width: 150px; height: 310px; }
  .pcard--feature .device { width: 196px; height: 406px; }
  .pcard--feature .pcard__shot,
  .pcard--feature .shot { padding: 36px 18px; }

  .pcard__body { padding: 26px 24px 22px; }
  .pcard__shot { padding: 22px 20px 26px; }
  .shot { margin: auto 24px 26px; width: calc(100% - 48px); }

  .pcard--feature { margin-bottom: 40px; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* work section head: centre it to match the featured card below */
  .section-head--row { align-items: center; text-align: center; gap: 20px; }
  .section-head--row > div { max-width: 100%; }
  #moreToggle { width: 100%; justify-content: center; }

  /* education strip stacks, so centre the label with its items */
  .edu__strip { align-items: stretch; text-align: center; }
  .edu__strip-label { justify-content: center; align-self: center; }
  .edu__strip-items { align-items: center; text-align: center; }

  /* Felix AI goes full-width at the bottom of the viewport */
  .ai-launcher { right: 16px; bottom: 16px; padding: 8px 15px 8px 8px; }
  .ai-launcher__orb { width: 36px; height: 36px; }
  .ai-mark-icon { width: 21px; height: 21px; }
  .ai-launcher__label { font-size: 11px; }

  .ai-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: min(78vh, calc(100vh - 16px));
  }
}

/* ==========================================================================
   <= 400px — small phone
   ========================================================================== */
@media (max-width: 400px) {

  /* the full name is kept as long as it fits and truncates rather than
     shoving the CTA off the capsule on 320px hardware */
  .brand { font-size: 12.5px; }
  .nav__cta { padding: 8px 12px; }
  .device { width: 132px; height: 273px; }
  .mobnav__link { font-size: 19px; }
}

/* ==========================================================================
   safe areas — iOS notch / home indicator
   ========================================================================== */
@supports (padding: max(0px)) {
  .ai-launcher { bottom: max(16px, env(safe-area-inset-bottom)); }
  .ai-panel { bottom: max(8px, env(safe-area-inset-bottom)); }
  .footer { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
}