/* TANCHES.GG phone layer. Applies at 640px and below; desktop/tablet untouched. */
@media (max-width: 640px) {
  /* Global rhythm */
  section[style*="padding: clamp(80px, 10vw, 140px)"],
  section[style*="padding: clamp(72px, 9vw, 120px)"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: clamp(96px, 12vw, 160px)"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 0 clamp(24px, 5vw, 72px) clamp(80px, 10vw, 140px)"] { padding-bottom: 56px !important; }
  section[style*="padding: 0 clamp(24px, 5vw, 72px) clamp(64px, 8vw, 96px)"] { padding-bottom: 48px !important; }
  [style*="padding: 150px clamp(24px, 5vw, 72px)"] { padding-top: 104px !important; padding-bottom: 32px !important; }
  [style*="padding: 170px clamp(24px, 5vw, 72px)"] { padding-top: 104px !important; padding-bottom: 32px !important; }
  [style*="clamp(24px, 5vw, 72px)"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="gap: clamp(40px, 6vw, 96px)"] { gap: 32px !important; }
  [style*="gap: clamp(48px, 7vw, 112px)"] { gap: 36px !important; }
  [style*="gap: clamp(48px, 6vw, 72px)"] { gap: 32px !important; }
  [style*="gap: clamp(40px, 5vw, 64px)"] { gap: 28px !important; }
  [style*="margin-top: clamp(56px, 7vw, 88px)"] { margin-top: 32px !important; }

  section[style*="padding: clamp(96px, 12vw, 150px)"] { padding-top: 64px !important; padding-bottom: 56px !important; }
  section[style*="padding: clamp(80px, 10vw, 140px) 0"], section[style*="padding: clamp(72px, 9vw, 120px) 0"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 0 0 clamp(80px, 10vw, 140px)"], section[style*="padding: 0 10px clamp(80px, 10vw, 140px)"] { padding-bottom: 56px !important; }
  section[style*="padding: 0 clamp(24px, 5vw, 72px) clamp(80px, 10vw, 120px)"] { padding-bottom: 56px !important; }
  [style*="padding: 160px clamp(24px, 5vw, 72px)"], [style*="padding: 170px clamp(24px, 5vw, 72px)"] { padding-top: 104px !important; padding-bottom: 40px !important; }
  [style*="padding: 150px clamp(24px, 5vw, 72px) 48px"] { padding-top: 104px !important; padding-bottom: 28px !important; }
  [style*="padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 72px)"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px) clamp(80px, 10vw, 140px)"] { padding-top: 28px !important; padding-bottom: 56px !important; }
  [style*="min-height: 640px; padding: 150px"] { min-height: 500px !important; }
  [style*="min-height: 620px"] { min-height: 500px !important; }
  [style*="min-height: 700px"] { min-height: 540px !important; }
  [style*="min-height: 480px"] { min-height: 0 !important; }
  [style*="min-height: 420px"] { min-height: 300px !important; }
  [style*="min-height: 380px"], [style*="min-height: 360px"] { min-height: 240px !important; }
  [style*="min-height: 340px"], [style*="min-height: 320px"] { min-height: 220px !important; }
  [style*="height: clamp(380px, 56vw, 720px)"], [style*="height: clamp(360px, 48vw, 620px)"], [style*="height: clamp(420px, 62vw, 760px)"] { height: 300px !important; }
  [style*="height: clamp(320px, 42vw, 560px)"] { height: 260px !important; }
  [style*="height: 78vh"] { height: 62svh !important; }
  [style*="height: calc(100vh - 48px)"] { height: calc(100svh - 32px) !important; }

  [style*="min-height: 300px"], [style*="min-height: 280px"], [style*="min-height: 260px"], [style*="min-height: 230px"], [style*="min-height: 220px"] { min-height: 0 !important; }
  h3[style*="margin: auto 0 0"] { margin-top: 6px !important; }
  [data-m="tracks"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  [data-m="tracks"] > div { padding: 14px !important; border-radius: 16px !important; gap: 10px !important; }
  [data-m="tracks"] > div span { font-size: 12px !important; }
  [data-m="tracks"] > div [style*="font-size: 17px"], [data-m="tracks"] > div [style*="font-size: 18px"], [data-m="tracks"] > div [style*="font-size: 16px"] { font-size: 15px !important; }

  [data-m="people"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }
  [data-m="people"] > div { gap: 10px !important; }
  [data-m="people"] > div > div:first-child { border-radius: 14px !important; }
  [data-m="people"] h3, [data-m="people"] [style*="font-size: 20px"], [data-m="people"] [style*="font-size: 22px"] { font-size: 16px !important; }
  [data-m="people"] p { font-size: 13px !important; }
  [style*="flex: 0 1 clamp(260px, 26vw, 360px)"] { flex-basis: 100% !important; aspect-ratio: 4 / 5 !important; }

  [data-m="deliv"] { gap: 10px !important; }
  [data-m="deliv"] > div { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 4px !important; padding: 16px !important; border-radius: 16px !important; }
  [data-m="deliv"] > div > span:first-child { width: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 11px !important; grid-row: span 2; }
  [data-m="deliv"] > div > span:nth-child(2) { font-size: 17px !important; align-self: center; }
  [data-m="deliv"] > div > span:nth-child(3) { grid-column: 2; font-size: 14px !important; line-height: 1.5 !important; }


  /* Card padding */
  [style*="padding: clamp(28px, 3vw, 40px)"], [style*="padding: clamp(28px, 3vw, 44px)"], [style*="padding: clamp(24px, 3vw, 36px)"],
  [style*="padding: clamp(28px, 4vw, 48px)"], [style*="padding: clamp(28px, 4vw, 52px)"], [style*="padding: clamp(32px, 5vw, 64px)"],
  [style*="padding: clamp(24px, 3.5vw, 44px)"], [style*="padding: clamp(24px, 4vw, 48px)"], [style*="padding: clamp(28px, 4vw, 56px)"],
  [style*="padding: clamp(28px, 5vw, 64px)"], [style*="padding: clamp(32px, 5vw, 56px)"], [style*="padding: clamp(28px, 4vw, 40px)"],
  [style*="padding: 28px;"], [style*="padding: 32px;"], [style*="padding: 34px 28px 28px"], [style*="padding: 28px 32px"], [style*="padding: 26px 26px 28px"] { padding: 20px !important; }
  [style*="padding: clamp(24px, 3vw, 36px) clamp(28px, 3vw, 44px)"] { padding: 18px 20px !important; }
  [style*="padding: 0 clamp(32px, 5vw, 64px) clamp(32px, 5vw, 64px)"] { padding: 0 20px 20px !important; }
  [style*="padding: 28px 0;"], [style*="padding: 32px 0;"], [style*="padding: clamp(28px, 4vw, 48px) 0"] { padding-top: 18px !important; padding-bottom: 18px !important; }
  [style*="grid-template-columns: 48px 1fr; gap: 20px; padding: 26px 0"] { padding: 18px 0 !important; gap: 14px !important; grid-template-columns: 36px 1fr !important; }
  button[style*="gap: 24px; padding: 26px 0"], button[style*="gap: 24px; padding: 28px 0"] { padding: 18px 0 !important; gap: 16px !important; font-size: 17px !important; }
  p[style*="padding: 0 60px 26px 0"], p[style*="padding: 0 clamp(0px, 4vw, 60px) 26px 0"], p[style*="padding: 0 clamp(0px, 4vw, 60px) 28px 0"] { padding: 0 0 18px !important; font-size: 15px !important; }

  /* Small-item grids go 2-up */
  [style*="grid-template-columns: repeat(auto-fit, minmax(90px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Logo marquees */
  [style*="width: 200px; height: 112px"] { width: 136px !important; height: 76px !important; padding: 16px !important; }
  [style*="width: 220px; height: 120px"] { width: 140px !important; height: 80px !important; padding: 18px !important; }

  /* Type scale */
  h1[style*="font-size: clamp(44px, 7vw, 104px)"],
  h1[style*="font-size: clamp(44px, 7vw, 108px)"] { font-size: 40px !important; line-height: 1.02 !important; }
  h2[style*="font-size: clamp(38px, 5vw, 72px)"],
  h2[style*="font-size: clamp(36px, 4.6vw, 66px)"],
  h2[style*="font-size: clamp(40px, 5.4vw, 80px)"],
  h2[style*="font-size: clamp(34px, 4.2vw, 56px)"],
  h2[style*="font-size: clamp(34px, 4.2vw, 60px)"],
  h2[style*="font-size: clamp(32px, 4vw, 52px)"] { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -0.035em !important; }
  h3[style*="font-size: clamp(28px, 3vw, 40px)"] { font-size: 24px !important; }
  p[style*="font-size: 17px"], p[style*="font-size: 18px"] { font-size: 16px !important; }
  p[style*="font-size: clamp(24px, 2.4vw, 32px)"] { font-size: 21px !important; }
  [style*="gap: 22px"] > h2, [style*="gap: 20px"] > h2 { margin-top: -6px !important; }

  /* Centered section heads read better left-aligned on a phone */
  [data-m="center-head"] { align-items: flex-start !important; text-align: left !important; gap: 16px !important; }

  /* Start a project (shared) */
  #start > div { padding: 40px 16px 20px !important; border-radius: 22px !important; }
  #start > div > div[style*="grid-template-columns"] { gap: 28px !important; }
  #start > div > div > div:first-child { gap: 16px !important; }
  #start > div > div > div:first-child > div:first-child { display: none !important; }
  #start h2 { font-size: 36px !important; }
  #start > div > div > div:first-child > div[style*="max-width: 460px"] { padding: 16px !important; gap: 12px !important; }
  #start form { padding: 18px !important; border-radius: 20px !important; gap: 14px !important; }
  #start form > div[style*="grid-template-columns"] { gap: 14px !important; }
  #start textarea { min-height: 88px !important; }
  #start form div[style*="minmax(140px, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  #start form div[style*="minmax(140px, 1fr)"] span { font-size: 12px !important; line-height: 1.35 !important; }

  /* Footer (shared) */
  footer[style*="padding: clamp(64px, 8vw, 100px)"] { padding: 44px 20px 24px !important; }
  footer > div { gap: 32px !important; }
  footer > div > div:first-child { gap: 32px 24px !important; }
  footer > div > div:first-child > div[style*="minmax(150px, 1fr)"] { gap: 28px 20px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  footer > div > div[style*="border-top"] { flex-direction: column !important; gap: 10px !important; font-size: 11px !important; }

  /* Nav */
  [data-m="nav"] { padding: 8px 10px !important; }
  [data-m="nav-pill"] { height: 54px !important; padding: 0 6px 0 14px !important; }

  /* Home hero */
  [data-m="hero"] { min-height: 660px !important; padding-top: 120px !important; border-radius: 22px !important; }
  [data-m="hero"] h1 { font-size: 44px !important; line-height: 1 !important; }
  [data-m="hero-body"] { padding-bottom: 92px !important; gap: 22px !important; }
  [data-m="hero-body"] > div:first-child { gap: 16px !important; }
  [data-m="hero-body"] > div:nth-child(2) { gap: 22px !important; }
  [data-m="hero-ctl"] { top: auto !important; bottom: 10px !important; left: 10px !important; right: 10px !important; justify-content: flex-start !important; }
  [data-m="hero-ctl"] > div { height: 42px !important; }
  [data-m="hero-ctl"] button { width: 34px !important; height: 34px !important; }
  [data-m="hero-ctl"] > a { min-height: 42px !important; padding: 5px 14px 5px 16px !important; min-width: 0 !important; flex: 0 1 auto !important; }
  [data-m="hero-ctl"] > a span[style*="font-size: 14px"] { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  [data-m="hero-ctl"] > a span[style*="font-size: 10px"] { font-size: 9px !important; }
  [data-m="cue"] { display: none !important; }
  [data-m="cta-row"] { flex-direction: column !important; gap: 10px !important; }
  [data-m="cta-row"] > a, [data-m="cta-row"] > a > *, [data-m="cta-row"] button { width: 100% !important; justify-content: center !important; }

  /* Stats: 2 x 2 */
  [data-m="stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m="stat"] { padding: 22px 14px 6px 0 !important; gap: 8px !important; border-right: 0 !important; }
  [data-m="stat"]:nth-child(odd) { border-right: 1px solid var(--divider) !important; }
  [data-m="stat"]:nth-child(even) { padding-left: 16px !important; }
  [data-m="stat"]:nth-child(n+3) { border-top: 1px solid var(--divider) !important; margin-top: 16px !important; }
  [data-m="stat-num"] { font-size: 44px !important; }
  [data-m="stat-lbl"] { font-size: 13px !important; line-height: 1.4 !important; }
  section[data-screen-label="02 Proof"] { padding-top: 40px !important; padding-bottom: 48px !important; }
  section[data-screen-label="02 Proof"] > div { gap: 20px !important; }
  section[data-screen-label="02 Proof"] > div > div:first-child { padding-bottom: 12px !important; }
  [data-m="mq-cell"] { width: 140px !important; height: 80px !important; padding: 18px !important; }
  [data-m="oem-cell"] { width: 130px !important; height: 76px !important; padding: 16px !important; }

  /* Solutions */
  [data-m="sol-wrap"] { gap: 28px !important; }
  [data-m="sol-row"] { padding: 20px 2px !important; gap: 6px 14px !important; }
  [data-m="sol-row"] > span[style*="font-size: clamp(28px, 3vw, 44px)"] { font-size: 26px !important; }
  [data-m="sol-row"] > a { width: 38px !important; height: 38px !important; }

  /* Projects */
  [data-m="pj-card"] { min-height: 340px !important; border-radius: 20px !important; }
  [data-m="pj-body"] { padding: 20px !important; gap: 8px !important; }
  [data-m="pj-body"] h3 { font-size: 22px !important; }
  [data-m="pj-body"] p { font-size: 14px !important; }

  /* Process */
  [data-m="ps-row"] { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 10px !important; }
  [data-m="ps-row"] > span > span { width: 30px !important; height: 30px !important; font-size: 10px !important; }
  [data-m="ps-row"] > span { margin-top: 16px !important; }
  [data-pl-line], [data-pl-fill] { left: 14px !important; }
  [data-proc-spine] { gap: 10px !important; }
  [data-m="ps-card"] { padding: 16px !important; gap: 10px !important; }
  [data-m="ps-card"] > div { gap: 10px !important; grid-template-columns: minmax(0, 1fr) !important; }
  [data-m="ps-ic"] { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  [data-m="ps-head"] { gap: 10px !important; }
  [data-m="ps-head"] h3 { font-size: 20px !important; }
  [data-m="ps-card"] p { font-size: 14px !important; line-height: 1.55 !important; }
  [data-m="ps-chips"] { gap: 6px !important; }
  [data-m="ps-chips"] > span { padding: 4px 9px !important; font-size: 11px !important; }

  /* Procurement logos: 2 x 2 */
  [data-m="proc-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 18px !important; }
  [data-m="proc-cell"] { padding: 16px !important; }
  [data-m="proc-logo"] { height: 64px !important; }

  /* FAQ */
  [data-m="faq-q"] { padding: 18px 0 !important; gap: 16px !important; font-size: 17px !important; }
}

/* Phones and tablets: two-column layouts stack below ~1024px, so side panels that stick on desktop
   (section titles, the Brand Center lion) would ride over the content beneath them. Let them scroll normally. */
@media (max-width: 1023px) {
  [style*="position: sticky; top: 120px"] { position: relative !important; top: auto !important; }
  [data-m="item-media"], [data-m="cart-sum"] { position: relative !important; top: auto !important; }
}

/* Touch screens: no hover lift or tilt on cards, and taps get no grey flash. */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 640px) {
  /* Brand Center: smaller lion, and the T / C labels sit under it instead of off the screen edges */
  [data-m="brand-mark"] { padding: 4px 0 60px !important; }
  [data-m="brand-mark"] > div { width: min(100%, 220px) !important; }
  [data-m="tc-c"], [data-m="tc-t"] { top: auto !important; bottom: -46px !important; }
  [data-m="tc-c"] { left: 50% !important; transform: translateX(6px) !important; }
  [data-m="tc-t"] { right: 50% !important; transform: translateX(-6px) !important; }
}