.bento-section { background: #f3f2ec; padding-block: clamp(42px,6vw,90px); }
.home-bento { background: var(--paper); border-bottom: 1px solid var(--line); }
.portfolio-heading, .bento-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; margin-bottom: clamp(19px,2.2vw,32px); }
.portfolio-heading h2, .bento-heading h2 { margin: 0; max-width: 15ch; font-size: clamp(40px,5.3vw,76px); line-height: .98; text-wrap: balance; }
.project-index { display: flex; flex-wrap: wrap; gap: 0 16px; }
.project-index a, .bento-link, .bento-project-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: 14px; font-weight: 550; }
.project-index a { color: var(--muted); text-decoration: underline; text-decoration-color: #b1b5ad; text-underline-offset: 5px; }
.bento-link { padding: 0 18px; border-radius: 999px; background: var(--ink); color: white; }
.bento-link:hover { background: var(--blue); }
.bento-project-link { width: fit-content; text-decoration: underline; text-underline-offset: 5px; }
.project-grid, .bento-preview-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(10px,1.2vw,18px); }
.bento-tile, .bento-preview { --tile-ink: #202720; --tile-muted: #384b40; --tile-rule: #b3c6ac;
  display: flex; position: relative; isolation: isolate; min-width: 0; flex-direction: column; gap: 16px;
  padding: clamp(22px,2.7vw,42px); border: 1px solid rgb(28 37 29 / .11); border-radius: clamp(18px,1.8vw,28px);
  background: var(--tile-fill); color: var(--tile-ink);
}
.bento-health { --tile-fill: #deead8; grid-column: span 7; }
.bento-meta { --tile-fill: #e1e5f8; --tile-rule: #b3bddf; --tile-muted: #334064; grid-column: span 5; }
.bento-flight { --tile-fill: #ffcead; --tile-muted: #663c2a; --tile-rule: #d49b78; grid-column: span 5; }
.bento-voice { --tile-fill: #f8f7f3; --tile-rule: #cdcfc5; --tile-muted: #4e544d; grid-column: span 7; }
.bento-agency { --tile-fill: #e8e6f0; --tile-muted: #464257; grid-column: span 5; }
.bento-platinum { --tile-fill: #e2eced; --tile-muted: #314d51; --tile-rule: #b8caca; grid-column: span 7; }
.bento-pug { --tile-fill: #f5e6bd; --tile-muted: #574621; --tile-rule: #d4c395; grid-column: span 5; }
.bento-gdi { --tile-fill: #e5e9e0; --tile-muted: #3d4e44; --tile-rule: #bfcabc; grid-column: 1 / -1; }
.review-subject { font-size: 13px; color: var(--tile-muted); font-weight: 550; margin: 0 0 9px; }
.project-grid .bento-health { grid-row: span 2; }
.project-intro, .bento-preview-copy { min-width: 0; }
.bento-category, .bento-tile .section-label { color: var(--tile-muted); font-size: 13px; font-weight: 550; line-height: 1.35; }
.bento-tile h3, .bento-preview h3 { font-size: clamp(30px,3.3vw,51px); line-height: .98; margin: 9px 0 11px; text-wrap: balance; }
.bento-health h3 { font-size: clamp(40px,5vw,76px); }
.bento-tile .project-lead, .bento-preview-copy > p:last-child { color: var(--tile-muted); max-width: 43ch; margin: 0; font-size: clamp(16px,1.16vw,18px); line-height: 1.45; }
.bento-tile .project-review, .bento-feedback { min-width: 0; margin: auto 0 0; border-top: 1px solid var(--tile-rule); padding: 15px 0 0; }
.project-review blockquote, .bento-feedback blockquote { margin: 0 0 10px; max-width: 48ch; font-size: clamp(18px,1.55vw,24px); line-height: 1.28; letter-spacing: -.015em; }
.project-review figcaption, .bento-feedback figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.project-review strong, .bento-feedback strong { font-size: 14px; font-weight: 600; }
.project-rating, .bento-rating { color: var(--tile-muted); white-space: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.project-rating > span, .bento-rating > span { color: #65431d; margin-right: 4px; }
.project-workflow { min-width: 0; }
.project-workflow summary { min-height: 44px; padding: 7px 0; border-top: 1px solid var(--tile-rule); font-size: 14px; }
.project-workflow summary span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--tile-rule); border-radius: 50%; }
.project-workflow[open] summary { margin-bottom: 10px; }
.project-context, .project-workflow dd { margin: 0; color: var(--tile-muted); font-size: 15px; line-height: 1.5; }
.project-workflow h4 { font-size: 17px; margin: 17px 0 8px; }
.project-workflow dl { margin: 0; }
.project-workflow dl > div { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: baseline; border-top: 1px solid var(--tile-rule); padding-block: 9px; }
.project-workflow dt { font-size: 15px; font-weight: 600; }

/* Stacked sheets and concentric signal traces echo the two featured workflows. */
.bento-illustration { overflow: hidden; position: relative; pointer-events: none; }
.bento-illustration i { --layer: 0; display: block; position: absolute; }
.bento-illustration i:nth-child(2) { --layer: 1; }
.bento-illustration i:nth-child(3) { --layer: 2; }
.bento-illustration i:nth-child(4) { --layer: 3; }
.bento-illustration i:nth-child(5) { --layer: 4; }
.bento-illustration i:nth-child(6) { --layer: 5; }
.bento-illustration i:nth-child(7) { --layer: 6; }
.bento-signal { order: 0; height: clamp(99px,11vw,176px); flex: 1 0 auto; min-height: 99px; border-radius: 12px; background: radial-gradient(ellipse at 55% 135%,#a7d69e,transparent 66%), #245746; }
.bento-signal i { width: calc(26% + var(--layer) * 9%); height: calc(27% + var(--layer) * 25%);
  left: 49%; top: 67%; border: 2px solid #c7e8b4; border-radius: 65% 40% 60% 39%; transform: translate(-50%,-50%) rotate(-17deg);
}
.bento-health .project-intro, .bento-health .bento-preview-copy { order: -1; }
.bento-health .project-review, .bento-health .bento-feedback { margin-top: 0; border-top: 0; padding-top: 0; }
.bento-deck { position: absolute; right: 0; top: 0; width: clamp(90px,10vw,148px); height: clamp(80px,9vw,125px); border-radius: 0 22px 0 0; }
.bento-deck i { width: 65%; height: 69%; border-radius: 6px; border: 1px solid #935733; background: #e99966;
  right: calc(4% + var(--layer) * 3.6%); top: calc(-12% + var(--layer) * 5.5%); transform: rotate(18deg) skewY(-6deg); }
.bento-deck i:last-child { background: repeating-linear-gradient(0deg,#ffe1c6 0 9px,#e7a77b 9px 10px); }
.bento-flight .project-intro, .bento-flight .bento-preview-copy { padding-right: clamp(66px,8.4vw,128px); }
.bento-meta .project-review { display: flex; align-items: end; min-height: 48px; }
.bento-agency { display: grid; grid-template-columns: minmax(0,1fr) minmax(112px,.62fr); align-items: center; gap: clamp(16px,2vw,36px); }
.bento-agency h3 { font-size: clamp(27px,2.7vw,42px); }
.bento-agency .case-film { width: min(100%,170px); justify-self: end; }
.case-film figcaption { gap: 4px; font-size: 12px; }
.case-film figcaption span:first-child { display: inline; }
.bento-preview { gap: 16px; }
.bento-preview .bento-project-link { margin-top: auto; }
.bento-preview .bento-feedback { margin-top: 0; }
.bento-preview .bento-signal { height: 86px; flex: none; min-height: 0; }
.bento-preview.bento-flight .bento-feedback { margin-top: auto; }
.bento-preview.bento-flight .bento-project-link { margin-top: 0; }
@media (min-width: 1021px) {
  .bento-gdi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px clamp(28px,4vw,65px); align-items: center; }
  .bento-gdi .project-review { border-top: 0; padding: 0; margin: 0; }
  .bento-gdi .project-workflow { grid-column: 1 / -1; }
  .project-grid .bento-meta { display: grid; grid-template-columns: minmax(0,1fr) 106px; align-items: center; }
  .project-grid .bento-meta .project-review { border: 0; margin: 0; padding: 0; }
  .bento-meta .project-rating { display: grid; gap: 4px; }
  .bento-meta .project-rating > span { font-size: 18px; }
  .bento-meta .project-workflow { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .project-grid .bento-health, .bento-preview-grid .bento-health { grid-column: span 6; }
  .bento-meta, .bento-flight, .bento-voice, .bento-agency, .bento-platinum, .bento-pug { grid-column: span 6; }
  .bento-agency { display: flex; align-items: flex-start; }
  .bento-agency .case-film { width: 142px; }
  .bento-flight .project-intro, .bento-flight .bento-preview-copy { padding-right: 52px; }
  .bento-deck { width: 70px; height: 66px; }
}
@media (max-width: 700px) {
  .portfolio-heading, .bento-heading { align-items: flex-start; }
  .project-grid, .bento-preview-grid { display: flex; flex-direction: column; gap: 12px; }
  .project-index { gap: 0 14px; }
  .bento-agency { display: grid; grid-template-columns: minmax(0,1fr) 112px; align-items: center; }
  .bento-agency .case-film { width: 100%; }
  .bento-agency .play-label { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
  .bento-agency .project-lead { font-size: 15px; }
  .bento-flight .project-intro, .bento-flight .bento-preview-copy { padding-right: 55px; }
  .bento-health .bento-signal { flex: none; height: 90px; min-height: 0; }
  .bento-deck { width: 80px; height: 80px; }
}
@media (max-width: 390px) {
  .bento-agency { grid-template-columns: minmax(0,1fr) 94px; gap: 10px; }
  .bento-agency .section-label { align-self: end; }
  .bento-agency .project-intro { display: contents; }
  .bento-agency h3 { margin: 0; align-self: start; }
  .bento-agency .case-film { grid-column: 2; grid-row: 1 / 3; }
  .bento-agency .project-lead { grid-column: 1 / -1; }
  .project-workflow dl > div { grid-template-columns: 1fr; gap: 4px; }
}