/* Shared styles for every page. Page-specific rules live in each page's <style> block;
   most layout is inline on the elements themselves, carried over from the design files. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; background: #f2ebdc; color: #241f18; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent, #dd6a3a); }
::selection { background: var(--accent, #dd6a3a); color: #fff; }
.tape { position: absolute; width: 92px; height: 26px; background: var(--tape, rgba(226,196,120,0.55)); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.tape::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,0.25) 3px 4px); }
.hot { position: relative; transition: box-shadow .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
[id^="ch-"] { scroll-margin-top: 76px; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, video:focus-visible { outline: 3px solid #dd6a3a; outline-offset: 2px; border-radius: 2px; }

/* Hover states (the design files used inline style-hover attributes). */
.hv-op:hover { opacity: 1 !important; }
.hv-dim:hover { color: inherit !important; opacity: 0.82 !important; }
.hv-lift:hover { transform: translateY(-2px) !important; }
.hv-lift-w:hover { color: #fff !important; transform: translateY(-2px) !important; }
.hv-card:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 44px -20px rgba(36,31,24,0.55) !important; }

/* Cursor glow on case-study pages. */
[data-beam] { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0; transition: opacity .4s ease; mix-blend-mode: multiply;
  background: radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(221,106,58,0.10) 0%, rgba(221,106,58,0.04) 45%, rgba(221,106,58,0) 70%); }
[data-beam].is-on { opacity: 1; }

/* Mobile menu panels stay hidden until the burger opens them. */
[data-menu-panel]:not([data-open]) { display: none !important; }
[data-menu-panel][data-open] { display: flex !important; }

/* Between tablet and phone, the research step arrows are hidden; on phones they come back rotated. */
@media (min-width: 768px) and (max-width: 860px) { [data-step-arrow] { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 767px) {
  [data-nav-links] { display: none !important; }
  [data-burger] { display: flex !important; }
  [data-m-sec] { padding-top: 28px !important; padding-bottom: 28px !important; }
  [data-m="h1"] { font-size: 36px !important; line-height: 1.02 !important; }
  [data-m="stats"] { flex-direction: column !important; gap: 0 !important; padding: 6px 20px !important; }
  [data-m="stats"] > div { flex: none !important; padding: 16px 0; }
  [data-m="stats"] > div + div { border-top: 1px solid rgba(36,31,24,0.14); }
  [data-m-only] { display: flex !important; }
  [data-m="visit"] { grid-template-columns: 1fr !important; }
  [data-m="steps"] { flex-direction: column !important; }
  [data-m="steps"] > [data-step-arrow] { display: flex !important; }
  [data-m="steps"] > [data-step-arrow] > span { display: inline-block; transform: rotate(90deg); line-height: 1; }
  [data-m="steps"] > div:not([data-step-arrow]) { flex: none !important; }
  [data-m="callout"] { font-size: 19px !important; line-height: 1.45 !important; }
  [data-m="result"] { flex-wrap: nowrap !important; }
  [data-m="result"] > span { font-size: 52px !important; }
  [data-m="result"] > span:nth-child(2) { font-size: 36px !important; }
  [data-m="stats"] { grid-template-columns: 1fr !important; }
  [data-m="stack"] { grid-template-columns: 1fr !important; }
  [data-m-hide] { display: none !important; }
  [data-m="hero"] { min-height: 0 !important; }
  [data-m="homeh1"] { font-size: 48px !important; }
  [data-m="btn2"] { display: grid !important; grid-template-columns: 1fr 1fr; }
  [data-m="btn2"] > a { text-align: center; display: flex; align-items: center; justify-content: center; min-height: 48px; padding-left: 10px !important; padding-right: 10px !important; }
  [data-m16] { font-size: 16px !important; }
  [data-m13] { font-size: 13px !important; }
  [data-lib] { background: transparent !important; border: 0 !important; overflow: visible !important; gap: 12px !important; }
  [data-lib-head] { display: none !important; }
  [data-lib-row] { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; background: #fff; border: 1px solid #e2e5ef !important; border-radius: 10px; padding: 16px !important; }
  [data-m-table] table { min-width: 0 !important; }
  [data-m-table] thead, [data-m-table] colgroup { display: none; }
  [data-m-table] table, [data-m-table] tbody, [data-m-table] tr, [data-m-table] td { display: block; width: 100%; }
  [data-m-table] tr { background: rgba(36,31,24,0.045); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
  [data-m-table] tr:last-child { margin-bottom: 0; }
  [data-m-table] td { padding: 0 0 12px !important; border: 0 !important; font-size: 16px !important; }
  [data-m-table] td:last-child { padding-bottom: 0 !important; }
  [data-m-table] td::before { content: attr(data-label); display: block; font-family: 'DM Sans'; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #655a49; margin-bottom: 4px; }
  /* The findings map sits in a card on desktop; on phones the rows become their own cards. */
  [data-finding-map] { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  [data-finding-map] tr { background: #fffdf6; border: 1px solid rgba(36,31,24,0.12); }
}

/* Scroll-reveal start state, applied before first paint so nothing flashes. */
.js [data-reveal] { opacity: 0; }