/* =============================================================
   VEEDAY CONSULTANTS — m-home.css  (round 11: homepage, phones only)
   Loaded after mobile.css on index.html only. Every rule sits inside the phone
   query; outside it the m-only pieces are already hidden by mobile.css.
   Two layers:
     - pure CSS (works even if js/m-home.js never runs): hero action tiles,
       the licence pass card, the services rail, the market chips;
     - html.m-home (set by js/m-home.js while the phone layer is live): the
       industries photo-card rail, the "how we work" timeline, the licence fold.
   ============================================================= */

@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 500px) {

  /* ═════════ HERO: two thumb-sized action tiles ═════════ */
  .hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__ctas .btn,
  .hero__ctas .btn.btn--lg {
    position: relative; width: auto; min-width: 0; min-height: 138px;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 16px;
    padding: 15px 16px 16px; border-radius: 18px;
    font-size: 15.5px; line-height: 1.28; letter-spacing: 0; text-align: left; white-space: normal;
  }
  .hero__ctas .btn > span:not(.hero__tile) { padding-right: 24px; text-wrap: balance; }
  .hero__ctas .btn .arrow { position: absolute; right: 16px; bottom: 21px; }
  .hero__ctas .btn--red { box-shadow: 0 18px 34px -18px rgba(200, 32, 26, .85); }
  .hero__ctas .btn--ghost { --b-bg: rgba(24, 20, 19, .74); --b-bd: rgba(250, 250, 248, .26); }
  .hero__tile { align-items: center; justify-content: space-between; gap: 8px; }
  .hero__tile b { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
  .hero__tile svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

  /* ═════════ LICENCE: a compact pass card ═════════ */
  .licence__seal { height: 250px; }
  .licence__meta { display: none; } /* the pass carries the same three facts */
  .pass {
    position: relative; margin: 4px -8px 26px; padding: 16px 18px 0;
    border-radius: 14px; color: var(--ink); overflow: hidden;
    background:
      repeating-radial-gradient(circle at 112% -20%, rgba(200, 32, 26, .07) 0 1px, transparent 1px 6px),
      linear-gradient(160deg, #FFFFFF 0%, var(--paper) 46%, var(--sand) 100%);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(17, 17, 17, .06);
  }
  .pass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); }
  .pass__top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(17, 17, 17, .1);
    font-family: var(--serif); font-size: 17px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
  .pass__top img { width: 26px; height: 26px; flex: none; }
  .pass__label { display: block; margin-top: 14px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
  .pass__no { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: .03em; color: var(--ink); font-variant-numeric: lining-nums; }
  .pass__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; padding-bottom: 16px; }
  .pass__grid dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(17, 17, 17, .56); }
  .pass__grid dd { margin-top: 3px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); }
  /* perforated tear line with ticket notches, above the copy action */
  .pass__copy {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: calc(100% + 36px); min-height: 50px; margin: 0 -18px; padding: 0 18px;
    border-top: 1px dashed rgba(17, 17, 17, .22);
    font-size: 14px; font-weight: 500; color: var(--ink);
    transition: background-color .2s;
  }
  .pass__copy[hidden] { display: none; }
  .pass__copy::before, .pass__copy::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #191312; }
  .pass__copy::before { left: -8px; } .pass__copy::after { right: -8px; }
  .pass__copy svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .pass__copy:active { background: rgba(17, 17, 17, .05); }
  .pass__copy.is-done svg { stroke: var(--ink); }

  /* the second paragraph folds behind "Read more" (only once js/m-home.js is running) */
  html.m-home .licence.m-fold #licenceMore { display: none; }
  .licence__more { align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--paper); }
  .licence__more i { width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease), margin .35s var(--ease); }
  .licence__more[aria-expanded="true"] i { transform: rotate(-135deg); margin-top: 3px; }

  /* ═════════ SERVICES: a swipe rail of tall cards ═════════ */
  .cards.m-rail { --m-rail-w: 86%; perspective: none; padding-top: 4px; padding-bottom: 6px; }
  html.js .cards.m-rail > [data-reveal] { transform: none; }
  .cards.m-rail .card__inner {
    border-radius: 16px; padding: 24px 22px 22px; background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(17, 17, 17, .04), 0 22px 36px -30px rgba(18, 16, 15, .55);
  }
  .cards.m-rail .card__title { font-size: 26px; margin: 14px 0 12px; }
  .cards.m-rail .card__inner > p:not(.eyebrow):not(.card__for) { font-size: 15.5px; line-height: 1.65; }
  .cards.m-rail .card__for { margin: auto -22px -22px; padding: 16px 22px 18px; border-top: 1px solid var(--line); background: var(--paper); }
  .cards.m-rail .eyebrow, .cards.m-rail .card__for span { font-size: 13px; letter-spacing: .1em; }
  #services .m-dots { color: var(--ink); }

  /* ═════════ GLOBAL REACH: markets as a chip rail under the globe ═════════ */
  .markets.m-rail {
    --m-rail-w: auto; --m-rail-gap: 8px;
    position: relative; margin-top: 6px; padding-top: 2px; padding-bottom: 4px; border-top: 0;
    scroll-snap-type: x proximity;
  }
  html.js .markets.m-rail[data-reveal] { transform: none; }
  .markets.m-rail .market,
  .markets.m-rail .market:hover {
    height: 44px; padding: 0 16px 0 14px; gap: 9px; align-items: center; justify-content: flex-start;
    border: 1px solid var(--line); border-radius: 999px; color: var(--mute);
    transition: background-color .35s, color .35s, border-color .35s;
  }
  .markets.m-rail .market::before { position: static; flex: none; margin: 0; transform: none; background: rgba(250, 250, 248, .3); transition: background-color .35s; }
  .markets.m-rail .market span { font-size: 14.5px; white-space: nowrap; }
  .markets.m-rail .market.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink); }
  .markets.m-rail .market.is-active::before { background: var(--red); }
  .markets.m-rail .market[data-hq] { border-style: dashed; }

  /* ═════════ INDUSTRIES: a rail of photo cards (js/m-home.js turns it on) ═════════ */
  html.m-home .slats.m-rail { --m-rail-w: 86%; height: auto; min-height: 0; flex-direction: row; align-items: stretch; padding-top: 2px; padding-bottom: 6px; }
  html.m-home .slats .slat,
  html.m-home .slats .slat.is-open {
    flex: 0 0 var(--m-rail-w); display: flex; flex-direction: column; border-left: 0; border-radius: 16px; overflow: hidden;
    background: var(--ink); color: var(--paper);
    box-shadow: 0 26px 40px -30px rgba(18, 16, 15, .7);
  }
  html.m-home .slats .slat::before { display: none; }
  html.m-home .slats .slat__btn { display: none; }
  /* the photo takes any spare height, so cards of different lengths stay full */
  html.m-home .slats .slat__img,
  html.m-home .slats .slat.is-open .slat__img {
    display: block; position: relative; z-index: 0; left: auto; flex: 1 0 196px;
    width: 100%; min-width: 0; height: auto; min-height: 196px; aspect-ratio: auto; object-fit: cover;
    transform: none; filter: none; background: #2a2321;
  }
  html.m-home .slats .slat::after { display: none; }
  html.m-home .slats .slat__body,
  html.m-home .slats .slat.is-open .slat__body {
    display: flex; flex-direction: column; flex: none; position: relative; z-index: 1; width: auto;
    padding: 4px 18px 8px; border-top: 3px solid var(--hue); animation: none;
  }
  /* a dark foot on the photo for the sector name, anchored to the top of the text block */
  html.m-home .slats .slat__body::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% + 3px); height: 150px; pointer-events: none;
    background: linear-gradient(0deg, rgba(18, 16, 15, .92) 0%, rgba(18, 16, 15, .5) 40%, rgba(18, 16, 15, 0) 100%);
  }
  html.m-home .slats .slat__title {
    display: block; position: absolute; left: 18px; right: 18px; bottom: calc(100% + 17px); max-width: none;
    font-size: 24px; line-height: 1.1; color: var(--paper); text-wrap: balance;
  }
  html.m-home .slats .slat .chips { display: block; margin: 8px 0 12px; }
  html.m-home .slats .slat .chips li {
    position: relative; padding: 8px 0 8px 18px; border: 0; border-bottom: 1px solid rgba(250, 250, 248, .1); border-radius: 0;
    background: none; color: rgba(250, 250, 248, .86); font-size: 14px; font-weight: 400; line-height: 1.4;
    opacity: 1; transform: none; transition: none;
  }
  html.m-home .slats .slat .chips li:last-child { border-bottom: 0; }
  html.m-home .slats .slat .chips li::before { content: ''; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
  html.m-home .slats .slat__links { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: auto; border-top: 1px solid rgba(250, 250, 248, .14); }
  html.m-home .slats .slat__links a {
    justify-content: space-between; min-height: 48px; padding: 0; border-bottom: 0; font-size: 14.5px;
  }
  html.m-home .slats .slat__links a + a { border-top: 1px solid rgba(250, 250, 248, .1); }
  html.m-home .slats .slat__links a .arrow { color: var(--hue); }
  html.m-home #industries .m-dots { color: var(--ink); }

  /* ═════════ HOW WE WORK: a scroll-linked timeline (js/m-home.js turns it on) ═════════ */
  html.m-home.js .process { height: auto; padding: 0 0 calc(var(--section) * .7); }
  html.m-home.js .process__stage { position: relative; top: auto; height: auto; overflow: visible; display: flex; flex-direction: column; }
  html.m-home.js .process__layout,
  html.m-home.js .process__left { display: contents; }
  html.m-home.js .process .sec-head { order: 1; padding: var(--section) var(--pad) 0; margin-bottom: 22px; pointer-events: auto; }
  html.m-home.js .process__title { display: block; order: 2; margin: 0; padding: 0 var(--pad) 26px; max-width: none; pointer-events: auto; }
  html.m-home.js .process__ticks { display: none; }
  html.m-home.js .process__canvas { display: none; }

  html.m-home.js .psteps {
    order: 4; position: relative; display: block; height: auto; pointer-events: auto;
    padding: 34px var(--pad) 0 calc(var(--pad) + 36px);
  }
  html.m-home.js .psteps::before,
  html.m-home.js .psteps::after {
    content: ''; position: absolute; left: calc(var(--pad) + 6px); width: 2px;
    top: var(--m-tl-a, 48px); bottom: var(--m-tl-b, 60px); border-radius: 2px;
  }
  html.m-home.js .psteps::before { background: rgba(250, 250, 248, .14); }
  html.m-home.js .psteps::after { background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--m-fill, 0)); }
  html.m-home.js .pstep,
  html.m-home.js .pstep.is-active,
  html.m-home.js .pstep.is-past {
    position: relative; inset: auto; grid-area: auto; border-top: 0;
    padding: 0 0 38px; opacity: .45; transform: none;
    transition: opacity .5s ease;
  }
  html.m-home.js .pstep:last-child { padding-bottom: 6px; }
  html.m-home.js .pstep.m-on { opacity: 1; }
  html.m-home.js .pstep::before {
    content: ''; position: absolute; left: -36px; top: 7px; width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid rgba(250, 250, 248, .4); background: var(--ink);
    transition: background-color .4s, border-color .4s, box-shadow .4s;
  }
  html.m-home.js .pstep.m-on::before { background: var(--red); border-color: var(--red); }
  html.m-home.js .pstep.m-now::before { box-shadow: 0 0 0 6px rgba(200, 32, 26, .22); }
  html.m-home.js .pstep h3 { font-size: 25px; margin-bottom: 10px; }
  html.m-home.js .pstep p { font-size: 15.5px; line-height: 1.65; }

  /* portrait: the talent field rides along as a sticky band above the timeline */
  @media (min-height: 501px) {
    html.m-home.js .process__canvas {
      display: block; order: 3; position: sticky; inset: 0 auto auto auto; z-index: 2;
      height: 40vh; height: 40svh; min-height: 250px; max-height: 360px;
      background: radial-gradient(70% 90% at 50% 55%, rgba(58, 15, 12, .9) 0%, rgba(18, 16, 15, 0) 75%), var(--ink);
      border-bottom: 1px solid rgba(250, 250, 248, .08);
    }
    /* steps surface gently from under the band */
    html.m-home.js .process__canvas::after {
      content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none;
      background: linear-gradient(180deg, var(--ink), rgba(18, 16, 15, 0));
    }
    html.m-home.js .process__key {
      top: 14px; left: var(--pad); right: var(--pad); z-index: 2;
      flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding: 0; border: 0; background: none; font-size: 13px;
      transition: transform .5s var(--ease);
    }
    html.m-home.js .process__key small { font-size: 13px; }
    /* while the top bar is showing over the band, the key steps down out from under it */
    html.m-home.js:has(#nav.is-scrolled:not(.is-hidden)) .process__key { transform: translateY(calc(var(--nav-h) - 8px)); }
    html.m-home.js .process__say {
      display: block; left: var(--pad); right: var(--pad); bottom: 14px;
      font-size: 19px; line-height: 1.3; text-wrap: balance;
    }
  }

  /* ═════════ LANDSCAPE PHONES ═════════ */
  @media (max-height: 500px) {
    /* the headline, line and both buttons still fit the first screen, clear of the dock */
    .hero { padding-top: calc(var(--nav-h) + 6px); }
    .hero__sub { margin-top: 10px; line-height: 1.5; }
    .hero__ctas { margin-top: 12px; }
    /* sideways there is no room for tall tiles: back to a row of two pills */
    .hero__ctas { display: flex; }
    .hero__ctas .hero__tile { display: none !important; }
    .hero__ctas .btn, .hero__ctas .btn.btn--lg { min-height: 48px; flex-direction: row; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; font-size: 15px; }
    .hero__ctas .btn > span:not(.hero__tile) { padding-right: 0; }
    .hero__ctas .btn .arrow { position: static; }
    .licence__seal { height: 220px; }
    .cards.m-rail { --m-rail-w: 52%; }
    html.m-home .slats.m-rail { --m-rail-w: 46%; }
    html.m-home .slats .slat__img, html.m-home .slats .slat.is-open .slat__img { flex-basis: 160px; min-height: 160px; }
    html.m-home .slats .slat__title { font-size: 22px; }
  }

  /* ═════════ REDUCED MOTION ═════════ */
  @media (prefers-reduced-motion: reduce) {
    .pass__copy, .licence__more i, .markets.m-rail .market, .markets.m-rail .market::before,
    html.m-home.js .pstep, html.m-home.js .pstep::before { transition: none !important; }
  }
}