/* WevDev — phone layer.
   Loaded last (after css/main.css and the page stylesheet) from layouts/app.blade.php, so it can
   refine any page without fighting specificity. Everything here is scoped to small screens;
   the desktop design is untouched. Breakpoints match the rest of the site: 900 / 640 / 460. */

/* ---------- touch polish (all touch devices) ---------- */
@media (hover: none) {
  a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* ---------- tablet & below ---------- */
@media (max-width: 900px) {
  /* compact bar: 12px padding + 40px logo = a 64px header, which the sticky
     portfolio filter below is pinned against */
  .nav { padding: 12px 0; }
  .nav .logo { gap: 9px; }
  .nav .logo-mark { width: 40px; height: 40px; }
  .nav .logo-word { font-size: 35px; height: 40px; line-height: 40px; }
  .filter-shell { top: 64px; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {

  /* --- rhythm: desktop gaps read as dead space on a 375px screen --- */
  section { padding: 64px 0; }
  .section-head { gap: 24px; margin-bottom: 36px; }
  .section-head .eyebrow { margin-bottom: 14px; }
  .page-header { padding: 116px 0 44px; }
  .crumb { margin-bottom: 20px; }
  .page-header .sub { margin-top: 20px; font-size: 16.5px; }
  .work-header { padding: 116px 0 28px; }
  .work-header .meta { margin-top: 28px; padding-top: 20px; }
  .post-head { padding-top: 104px; }
  .back-link { padding: 10px 0; margin-bottom: 20px; }
  .h2 { font-size: clamp(34px, 9.6vw, 44px); }

  /* --- buttons: a pair shares the row, or each takes a full row — never ragged widths --- */
  .btn { padding: 15px 20px; justify-content: center; }
  .hero-cta-row { margin-top: 36px; gap: 10px; }
  .hero-cta-row .btn { flex: 1 1 auto; }
  .cta { padding: 52px 22px; border-radius: 22px; }
  .cta .btn { flex: 1 1 220px; }

  /* --- home: hero --- */
  .hero { padding: 112px 0 56px; }
  .hero .sub { margin-top: 24px; }
  .hero .sub p { font-size: 17px; }

  /* headline: big enough to fill the column, and every row the same height —
     the rotating word's 1.25em reel used to open a wider gap above and below it */
  .hero .hh { font-size: clamp(46px, 14.6vw, 64px); line-height: 1.04; letter-spacing: -0.045em; }
  .hero .hh-lead { margin-bottom: 0; }
  .hero .hh .rotator-wrap { height: 1.04em; padding-bottom: 0; }
  .hero .hh .rotator { animation-name: rotate-tight; }
  .hero .hh .rotator span { height: 1.04em; line-height: 1.04em; }
  .hero-text { font-size: 16.5px; }

  /* --- stat panels: 2 × 2 instead of four full-width rows --- */
  .hero-stats { margin-top: 64px; }
  .hero-stats, .fact-strip { grid-template-columns: 1fr 1fr; }
  .stat-cell, .fact {
    padding: 22px 18px 20px; gap: 10px;
    border-right: 1px solid var(--line); border-bottom: none;
  }
  .stat-cell:nth-child(2n), .fact:nth-child(2n) { border-right: none; }
  .stat-cell:nth-child(-n+2), .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat-num, .fact-num { font-size: 38px; }
  .stat-label, .fact-label { font-size: 9.5px; line-height: 1.5; }

  /* home "studio" bento */
  .as-left { padding: 36px 22px 32px; gap: 26px; }
  .as-note p { font-size: 16px; }
  .as-right { grid-template-columns: 1fr 1fr; gap: 10px; }
  .as-stat { min-height: 128px; padding: 44px 16px 18px; justify-content: flex-end; }
  .as-stat-idx { top: 16px; left: 16px; }
  .as-stat-n { font-size: 34px; }
  .as-stat-l { font-size: 9px; margin-top: 6px; }

  /* portfolio stats */
  .stats-strip { margin: 40px 0 0; }
  .stat { padding: 22px 18px 20px; gap: 10px; }

  /* --- filter rows scroll sideways in one line instead of stacking three deep --- */
  .stack-filters, .filter-chips, .blog-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -20px; padding: 2px 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
  }
  .stack-filters::-webkit-scrollbar, .filter-chips::-webkit-scrollbar, .blog-filters::-webkit-scrollbar { display: none; }
  .stack-filter, .wchip, .bchip { flex: none; padding: 11px 16px; }
  .stack-bar { gap: 14px; margin-bottom: 20px; }
  .blog-filters { margin-bottom: 28px; }
  .filter-shell { padding: 12px 0; }
  .filter-row { flex-wrap: nowrap; gap: 12px; }
  .filter-chips { flex: 1; min-width: 0; margin-right: 0; padding-right: 16px; }
  .view-toggle { flex: none; }
  .view-toggle button { padding: 8px 12px; }

  /* --- tool tiles: drop the square ratio, so 19 tiles stop eating three screens --- */
  .stack-item { aspect-ratio: auto; min-height: 100px; gap: 18px; padding: 14px 14px 12px; }
  .stack-sym { font-size: 18px; }

  /* --- services page --- */
  .svc-card:has(.svc-content) { padding: 26px 22px; gap: 24px; border-radius: var(--radius); }
  .svc-card .svc-desc { margin: 18px 0 22px; font-size: 15.5px; }
  .svc-list li { align-items: flex-start; line-height: 1.45; }
  .svc-visual { aspect-ratio: 16 / 9; }
  .price-card { padding: 28px 24px; gap: 16px; }
  .price-amount { font-size: 40px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 6px; }
  .price-amount span { white-space: nowrap; }

  /* --- service detail --- */
  .svc-meta { gap: 8px 10px; }
  .offer-card { padding: 26px 22px; }
  .offer-card h3 { margin: 18px 0 10px; font-size: 21px; }
  .deliver-list { gap: 0; }
  .deliver-list li { padding: 18px 0; font-size: 16px; }
  .tl-step { padding: 24px 0; }
  .tl-dot { font-size: 46px; }
  .faq summary { padding: 22px 0; gap: 16px; font-size: 17px; }

  /* --- about --- */
  .intro-grid p { font-size: 17px; }
  .manifesto { padding: 28px 22px; border-radius: var(--radius); }
  .manifesto ul { gap: 16px; }
  .manifesto li { grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; }
  .team-grid { gap: 10px; }
  .team-info { padding: 14px 14px 16px; }
  .team-info h3 { font-size: 18px; }
  .team-info .role { font-size: 10px; }
  .team-social { left: 10px; bottom: 10px; }
  .value { padding: 28px 22px; }
  .value-num { font-size: 44px; }
  .value-title { margin: 18px 0 10px; font-size: 22px; }

  /* --- contact --- */
  .contact-grid { gap: 40px; }
  .form { gap: 20px; }
  .field input, .field textarea, .field select { font-size: 18px; }
  .chip { padding: 12px 16px; }
  .info-card { padding: 24px 22px; }
  .availability { padding: 20px; }

  /* --- blog --- */
  .post-card-body { padding: 20px 20px 24px; }
  .post-feature-body { padding: 24px 22px 28px; }
  .post-body h2 { margin-top: 1.7em; }
  .post-share a { padding: 10px 16px; }
  .comment-form input:not(.hp input), .comment-form textarea, .fh-news-field input[type=email] {
    font-size: 16px; /* under 16px, iOS Safari zooms the page on focus */
  }

  /* --- portfolio --- */
  .work-index { padding: 20px 0 8px; }
  .work-grid { padding: 24px 0 8px; gap: 14px; }
  .wcard-body { padding: 22px; }

  /* --- testimonials: 8px dots get a finger-sized hit area --- */
  .t-dot { position: relative; }
  .t-dot::before { content: ""; position: absolute; inset: -14px -6px; }

  /* --- footer --- */
  .footer { margin-top: 48px; }
  .fh { padding: 56px 0 48px; }
  /* status pill, headline and disc sit on the centre line on phones */
  .fh-status { display: flex; width: fit-content; margin-inline: auto; }
  .fh-main { margin-top: 26px; gap: 28px; flex-direction: column; align-items: center; text-align: center; }
  .fh-head { align-items: center; }
  .fh-disc { width: 112px; }
  .fh-mail { margin-top: 40px; padding-top: 24px; }
  .fh-meta { gap: 10px 24px; }
  .fh-news { margin-top: 32px; padding-top: 26px; }

  /* brand on top, two link columns side by side, an odd last column spans the row */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 44px 0 36px; }
  .footer-grid > .f-brand { grid-column: 1 / -1; }
  .footer-grid > .f-col:last-child:nth-child(even) { grid-column: 1 / -1; }
  .footer h5 { margin-bottom: 8px; }
  .footer ul { gap: 0; }
  .footer ul a { padding: 9px 0; }  /* ~40px rows instead of 22px tap targets */
  .footer ul a::after { bottom: 6px; }
  .footer .f-plain, .f-addr { padding: 9px 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .f-top { padding: 11px 18px; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .hero-cta-row .btn { flex-basis: 100%; }
  .stat-num, .fact-num { font-size: 34px; }
  .stat-cell, .fact { padding: 20px 14px 18px; }
}

/* the hero reel's steps, re-cut for the 1.04em rows used on phones */
@keyframes rotate-tight {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-1.04em); }
  50%, 70% { transform: translateY(-2.08em); }
  75%, 95% { transform: translateY(-3.12em); }
  100% { transform: translateY(-4.16em); }
}