html, body { margin: 0; padding: 0; background: #F3F0E9; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: #A8CE00; }
::selection { background: #D8FF3E; }
@media (hover: hover) { html, body, body * { cursor: none !important; } }

@keyframes fdUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes revealDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.row-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.1;
  transition: color .3s ease;
  color: #111111;
}

.case-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  min-height: 43px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.case-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 14px;
}

.case-fig-bleed {
  width: calc(100% + 220px + clamp(24px, 4vw, 72px));
  margin: clamp(8px, 1.4vh, 16px) 0 clamp(8px, 1.4vh, 16px) calc(-220px - clamp(24px, 4vw, 72px));
}

.case-fig-bleed:not([data-proto-slot]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 34px);
}

.case-fig-bleed[data-no-reveal] {
  gap: 16px;
}

/* Work rows scale with their media instead of clipping the final card. */
.work-section { height: auto !important; overflow: visible !important; }
.work-inner { height: auto !important; }
.work-row { height: 300px !important; }
.work-row-slot { height: 240px !important; }
@keyframes kwMarq { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grainDrift {
  0% { background-position: 0 0; }
  25% { background-position: -14px 9px; }
  50% { background-position: 8px -12px; }
  75% { background-position: -6px -4px; }
  100% { background-position: 0 0; }
}

/* Real :hover rules standing in for the design tool's style-hover attribute.
   !important: these elements carry an inline base color/background (e.g.
   color:inherit), which otherwise beats a plain class rule on specificity
   alone and the hover state would never show. */
@media (hover: hover) {
  .h-lime:hover { color: #A8CE00 !important; }
  .h-underline-lime:hover { border-bottom-color: currentColor !important; color: #A8CE00 !important; }
  .h-arrow:hover { transform: translate(2px, -2px); }
  .h-row:hover { background: rgba(17, 17, 17, .035) !important; }
  .h-invert:hover { background-color: #111111 !important; color: #FFFFF8 !important; }
  .h-lime-bg:hover { background-color: #A8CE00 !important; }
}

/* Touch devices receive the desktop hover state after a deliberate hold. */
.is-held.h-lime { color: #A8CE00 !important; }
.is-held.h-underline-lime { border-bottom-color: currentColor !important; color: #A8CE00 !important; }
.is-held .h-arrow, .h-arrow.is-held { transform: translate(2px, -2px); }
.is-held.h-row { background: rgba(17, 17, 17, .035) !important; }
.is-held.h-invert { background-color: #111111 !important; color: #FFFFF8 !important; }
.is-held.h-lime-bg { background-color: #A8CE00 !important; }
.is-held > .tilt-inner { transform: scale(1.06) !important; }

[data-vp-l] { display: inline-block; }

.honda-case-row {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  width: 100%;
}
.honda-case-row > figure { min-width: 0; }
.honda-case-row img { width: 100%; height: auto; }

.faz-churn-after { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 38px); }
.faz-churn-after .case-fig-bleed { width: 100%; margin: 0; align-items: flex-start; }
.faz-churn-after .case-fig-bleed > div { justify-content: flex-start !important; }

.footer-case-card { flex: 1 1 240px !important; min-width: min(100%,240px) !important; }
.footer-case-card-copy { height: 104px; box-sizing: border-box; justify-content: flex-start; overflow: hidden; }
.footer-case-card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#cursor { z-index: 2147483646 !important; }
#cursor-label { z-index: 2147483645 !important; }

.case-image-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 56px);
  background: rgba(218, 250, 32, .25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.case-image-modal.is-open { display: flex; }
.case-image-modal-panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(14px, 2vw, 24px);
  overflow: auto;
  background: #FFFFF8;
  border: 1px solid rgba(17,17,17,.24);
}
.case-image-modal-media { display: flex; align-items: center; justify-content: center; min-height: 0; }
.case-image-modal-media img { display: block; max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.case-image-modal-caption { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.case-image-modal-close {
  position: static;
  align-self: flex-end;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #111111;
  background: #FFFFF8;
  color: #111111;
  font: 500 14px/1 'IBM Plex Mono', monospace;
}
[data-case-zoom] { cursor: zoom-in; }

/* The globe is part of the mobile intro only; desktop keeps its original
   three-column loading composition unchanged. */
.intro-globe { display: none; }
.intro-ast-vector { display: none; }

@media (min-width: 769px) {
  #nav-reload { display: block !important; grid-column: 2; }
}

/* Bilingual content: both languages render in the DOM, CSS toggles which
   shows. Switching language is then a pure attribute flip — no re-render,
   so running effects (cursor, canvas field, loader, dx-reveal) never restart. */
html[data-lang="en"] [data-l="pt"] { display: none !important; }
html[data-lang="pt"] [data-l="en"] { display: none !important; }

.case-view { display: none; }
html[data-route="home"] .home-view { display: block; }
html[data-route="home"] .case-view { display: none; }
html[data-route="w1"] .home-view, html[data-route="w2"] .home-view, html[data-route="w3"] .home-view { display: none; }
html[data-route="w2"] .case-view[data-case="w2"], html[data-route="w3"] .case-view[data-case="w3"] { display: block; }

/* ============================================================
   Responsive breakpoints — everything above 768px is untouched;
   these only narrow what would otherwise overflow or crowd on
   tablet/phone widths. Targets classes rather than the inline
   styles directly (index.html/honda.html/render.js/honda-render.js
   are inline-style-heavy by convention), overriding with
   !important since an inline style always outranks a plain class.

   .home-nav-grid   — index.html home nav, 3-col grid, 24px uppercase type
   .home-nav-right  — its 3rd column ("Brazil based" / Connect link)
   #nav-reload      — its center column ("Georgia Hoffmann / Product Designer")
   .about-copy      — the 48px About paragraph
   .work-row        — each home work-list row (4-col grid)
   .work-row-slot   — its cover-image column
   .work-row-year   — its year column
   .case-nav-grid   — case-page nav, 3-col grid (both index.html cases + honda.html)
   .case-body-grid  — case section's sidebar+content 2-col grid (220px sidebar)
   .case-sidebar    — that grid's sticky number+heading column
   .case-fig-bleed  — figure/phone-mockup rows that bleed past the sidebar
                       via a negative margin sized to the 220px sidebar
   ============================================================ */
@media (max-width: 768px) {
  .intro-ast-glyph { display: none; }
  .intro-ast-vector { display: block; width: 64px; height: 64px; overflow: visible; }
  [data-intro-ast] { width: 64px; height: 64px; line-height: 1 !important; }
  #intro [data-intro-text] { padding: 0 !important; }
  .intro-copy-grid {
    position: absolute;
    inset: 0;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.45;
  }
  .intro-location,
  .intro-identity,
  .intro-welcome { position: absolute; }
  .intro-location {
    top: max(28px, env(safe-area-inset-top));
    left: 28px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .intro-globe { display: block; flex: none; }
  .intro-identity {
    right: 28px;
    bottom: max(28px, env(safe-area-inset-bottom));
    width: min(190px, calc(100vw - 56px));
    text-align: right !important;
  }
  .intro-identity span { white-space: pre-line; }
  .intro-welcome {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center !important;
    white-space: nowrap;
  }

  .home-view > section { height: 840px !important; }
  .hero-section, .about-section { touch-action: pan-y; }
  .home-nav-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; font-size: 15px !important; gap: 14px !important; }
  .nav-globe { width: 12px !important; height: 12px !important; }
  #nav-reload { display: none !important; }
  .home-nav-right { grid-column: 2; align-items: flex-end !important; text-align: right !important; }
  .home-view > .about-section { height: auto !important; min-height: 0; overflow: visible !important; }
  .about-inner { height: auto !important; min-height: 0; padding: 80px 28px !important; }
  .about-label { padding-top: 0 !important; }
  .about-text-wrap { flex: none !important; margin-top: 40px; }
  .about-copy { font-size: 36px !important; }

  .home-view > .work-section { height: auto !important; }
  .work-inner { height: auto !important; justify-content: flex-start !important; padding: 80px 28px 34px !important; }
  .work-heading { height: auto !important; margin-bottom: 40px !important; }
  #work-list { padding-top: 0 !important; }
  .work-row { grid-template-columns: 48px minmax(0,1fr) auto !important; grid-template-rows: auto 180px; align-items:center !important; gap: 16px 12px !important; height: auto !important; padding: 18px 4px !important; }
  .work-row-slot { grid-column: 1 / -1; grid-row: 2; width: 100% !important; height: 180px !important; }
  .work-row-year { grid-column: 3; grid-row: 1; display: block !important; }

  .case-nav-grid { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); font-size: 10px; gap: 12px; }
  .case-nav-grid > *:nth-child(2) { display: none; }
  .case-nav-grid > *:nth-child(3) { grid-column: 3; justify-self: end; text-align: right; }

  .case-body-grid { grid-template-columns: minmax(0,160px) minmax(0,1fr); gap: 20px; }
  .case-fig-bleed { width: calc(100% + 160px + 20px); margin-left: calc(-160px - 20px); }
}

@media (max-width: 480px) {
  .home-view > .hero-section { height: 100svh !important; min-height: 100svh; }
  .home-nav-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; font-size: 11px !important; }
  #nav-reload { display: none !important; }
  .home-nav-right { grid-column: 2; align-items: flex-end !important; text-align: right !important; }

  .about-copy { font-size: 26.4px !important; }

  .work-row { grid-template-columns: 34px minmax(0,1fr) auto !important; grid-template-rows: auto 180px; height: auto !important; gap: 16px 10px !important; }
  .work-row-slot { display: block !important; height: 180px !important; }
  .work-row-year { display: block !important; }
  .row-title { min-width: 0; font-size: clamp(13px, 3.7vw, 15px); }
  .work-row-year { font-size: 10px !important; }

  .honda-case-row[data-count="2"] { flex-direction: column; }
  .honda-case-row[data-count="2"] > figure { flex: none !important; width: 100%; }
  .footer-cards, #footer-cards { flex-direction: column !important; flex-wrap: nowrap !important; gap: 12px !important; }
  .footer-case-card { flex: none !important; width: 100% !important; min-width: 0 !important; aspect-ratio: 1 / 1; }
  .footer-case-card-meta { font-size: 9.5px !important; letter-spacing: .16em !important; }
  .footer-case-card-title { font-size: 15px !important; line-height: 1.3 !important; }
  .footer-case-card-copy { height: 104px; gap: 6px !important; padding: 14px 16px !important; }

  .case-nav-grid { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; }
  .case-nav-grid > *:nth-child(2) { display: none; }
  .case-nav-grid > *:nth-child(3) { grid-column: 3; justify-self: end; text-align: right; }

  /* No room for a side column at all: the number+heading sit above the
     body copy instead of sticking beside it. */
  .case-body-grid { grid-template-columns: 1fr; }
  .case-sidebar { position: static; flex-direction: row; align-items: baseline; gap: 10px; }
  .case-fig-bleed { width: 100%; margin-left: 0; }
}