/* Four illustrated possibilities, one horizontally browsable stage. */
.digital-gallery { margin-top: clamp(72px, 9vw, 120px); --dg-ink: #20372b; --dg-green: #52755f; }
.dg-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 3rem; margin-bottom: 2.5rem; }
.dg-heading h2 { font-size: clamp(2.8rem, 4.9vw, 4.5rem); }
.dg-heading > p { max-width: 25rem; justify-self: end; color: var(--muted); line-height: 1.75; font-size: 1rem; }
.dg-chapters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.dg-chapters button { position: relative; display: flex; align-items: center; gap: .8rem; padding: 1.4rem .65rem; color: #626963; font-size: .85rem; cursor: pointer; text-align: left; transition: color .2s, background .2s; }
.dg-chapters button span { color: #688471; font-size: .7rem; }
.dg-chapters button::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--dg-green); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.dg-chapters button[aria-current="true"] { color: #20372b; background: #e9ede7; }
.dg-chapters button[aria-current="true"]::after { transform: scaleX(1); }
.dg-chapters button:hover { color: #20372b; background: #edf0eb; }
.dg-track { display: grid; gap: 2rem; }
.dg-ready .dg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; gap: 0; border-radius: 0 0 5px 5px; }
.dg-track::-webkit-scrollbar { display: none; }
.dg-slide { min-width: 0; display: grid; grid-template-columns: 1.12fr 1fr; background: #17251d; color: #f4f4f1; }
.dg-ready .dg-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.dg-scene { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; background: #dce5d9; color: var(--dg-ink); }
.dg-scene::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#59756322 .7px, transparent .7px); background-size: 18px 18px; mask-image: linear-gradient(135deg, black, transparent 80%); pointer-events: none; }
.dg-scene-top { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 1.7rem 1.8rem 0; font-size: .65rem; letter-spacing: .035em; color: #526958; }
.dg-scene-top > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-art { position: relative; width: 100%; height: 430px; margin: auto 0; flex: none; isolation: isolate; }
.dg-orbit { position: absolute; z-index: -1; width: 360px; height: 360px; top: 8%; left: calc(50% - 180px); border: 1px solid #52755f28; border-radius: 50%; box-shadow: 0 0 0 45px #52755f08, 0 0 0 90px #52755f05; }
.dg-scene figcaption { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: auto; padding: 0 1.8rem 1.6rem; color: #526958; font-size: .65rem; }
.dg-scene figcaption > span { font-size: .55rem; white-space: nowrap; opacity: .8; }
.dg-copy { min-width: 0; padding: 2rem clamp(1.7rem, 3.2vw, 3rem) 2.5rem; display: flex; flex-direction: column; }
.dg-kicker { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #b4cbb8; font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.dg-symbol { font-size: 1.7rem; line-height: 1; }
.digital-layout-digital .dg-copy h3 { margin: 2rem 0 1.25rem; font-family: "Poiret One", "Century Gothic", sans-serif; font-weight: 400; font-size: clamp(2.5rem, 3.5vw, 3.3rem); line-height: 1.08; letter-spacing: -.04em; }
.dg-copy h3 em { font-style: normal; color: #a9c9af; }
.dg-copy p { font-size: .86rem; line-height: 1.8; color: #b9c4bb; }
.dg-copy .dg-lead { color: #edf1e9; font-size: 1.06rem; line-height: 1.6; margin-bottom: 1rem; }
.dg-features { margin: 1.4rem 0 1.8rem; display: grid; gap: .6rem; font-size: .77rem; color: #d0dbd0; }
.dg-features li { display: flex; gap: .65rem; align-items: baseline; }
.dg-features li::before { content: '↗'; color: #a9c9af; }
.dg-payoff { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid #ffffff26; font-size: .9rem; color: #e7eee2; }
.dg-payoff > span { display: block; color: #9daf9f; font-size: .57rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: .4rem; }
.dg-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.dg-position { display: flex; align-items: center; gap: .8rem; font-size: .7rem; color: var(--dg-green); font-variant-numeric: tabular-nums; }
.dg-progress { display: block; width: 6rem; height: 2px; background: #d5ddd6; }
.dg-progress i { display: block; height: 100%; width: 25%; background: var(--dg-green); transform: translateX(var(--dg-progress, 0%)); transition: transform .3s; }
.dg-footer p { font-size: .75rem; color: #626963; }
.dg-arrows { display: flex; gap: .6rem; }
.dg-arrows button { width: 44px; height: 44px; border: 1px solid #bac9bd; border-radius: 50%; color: var(--dg-ink); font-size: 1.3rem; cursor: pointer; transition: color .2s, background .2s; }
.dg-arrows button:hover:enabled { background: var(--dg-ink); color: white; }
.dg-arrows button:disabled { opacity: .3; cursor: default; }
.digital-gallery :is(button, .dg-track):focus-visible { outline: 2px solid #78a18c; outline-offset: -4px; }
/* Miniature interfaces are illustrative, not interactive controls. */
.dg-window-bar { display: flex; gap: 4px; align-items: center; height: 29px; padding: 0 12px; background: #f4f6f0; border-bottom: 1px solid #dfe5dc; border-radius: 9px 9px 0 0; }
.dg-window-bar i { width: 4px; height: 4px; border-radius: 50%; background: #b5c5b7; }
.dg-window-bar > span { flex: 1; text-align: center; font-size: 7px; color: #6b7c6e; margin-right: 12px; }
.dg-mini-label { display: block; color: #67816b; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.dg-abstract-landscape { position: relative; overflow: hidden; background: #c8d6a9; }
.dg-abstract-landscape::before { content: ''; position: absolute; width: 120%; height: 135%; left: -45%; top: 35%; border-radius: 45%; background: #607f66; transform: rotate(-25deg); }
.dg-abstract-landscape::after { content: ''; position: absolute; width: 90%; height: 130%; right: -38%; top: 17%; border-radius: 45%; background: #93ac87; transform: rotate(35deg); }
.dg-web-preview { position: absolute; width: 62%; top: 58px; right: 6%; border: 1px solid #b1c4ad; border-radius: 10px; background: #fafbf5; box-shadow: 0 22px 45px #2d4d2820; transform: perspective(900px) rotateY(-8deg) rotateZ(3deg); }
.dg-web-content { padding: 22px; }
.dg-web-content .dg-abstract-landscape { height: 104px; margin: 16px 0; border-radius: 3px; }
.dg-web-content b { display: block; font-family: "Poiret One", sans-serif; font-size: 25px; line-height: 1.1; }
.dg-web-content > span:not(.dg-mini-label) { font-size: 8px; display: block; margin-top: 8px; }
.dg-mini-link { font-size: 8px; color: #52755f; margin-top: 16px; }
.dg-phone { position: absolute; z-index: 1; width: 180px; height: 342px; top: 32px; left: 9%; border: 5px solid #263b2b; border-radius: 28px; background: #f9faf3; box-shadow: 8px 18px 35px #2d4d283b, inset 0 0 0 1px #b4c3aa; transform: rotate(-7deg); }
.dg-phone::after { content: ''; position: absolute; width: 48px; height: 3px; background: #344833; bottom: 8px; left: calc(50% - 24px); border-radius: 5px; }
.dg-phone-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px 13px; font-size: 7px; }
.dg-phone-top i { width: 49px; height: 12px; border-radius: 20px; background: #263b2b; }
.dg-phone-body { padding: 7px 13px; }
.dg-phone-body > b { display: block; margin: 6px 0 2px; font-size: 19px; font-weight: 500; }
.dg-phone-sub { display: block; color: #798471; font-size: 8px; }
.dg-phone-field { margin: 15px 0 12px; padding: 11px; background: white; border: 1px solid #e0e6d8; border-radius: 8px; }
.dg-phone-field small { display: block; font-size: 7px; color: #6b7c6e; }
.dg-phone-field strong { display: block; font-size: 9px; margin-top: 5px; }
.dg-phone-field .dg-abstract-landscape { height: 70px; margin: 10px 0 7px; border-radius: 3px; }
.dg-phone-field > span { display: flex; justify-content: space-between; font-size: 7px; }
.dg-publish { background: #315d43; color: #f7fff5; padding: 10px; border-radius: 5px; font-size: 9px; text-align: center; }
.dg-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; border: 1px solid #fafff6; border-radius: 9px; padding: 15px 17px; background: #f8fcf1; box-shadow: 0 12px 35px #2d4d2825; }
.dg-float b { display: block; font-size: 11px; font-weight: 500; }
.dg-float small { display: block; margin-top: 3px; font-size: 8px; color: #647a65; }
.dg-status-icon { display: grid; place-items: center; background: #dfeccb; color: #3f6d45; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; flex-shrink: 0; }
.dg-float--published { bottom: 28px; right: 7%; }
.dg-scene--portal { background: #e1e7e1; }
.dg-dashboard { position: absolute; left: 5%; width: 90%; top: 58px; background: #fafcf7; border: 1px solid #bfd0bd; border-radius: 10px; box-shadow: 0 25px 45px #2d4d2825; transform: perspective(1000px) rotateY(6deg) rotateZ(-2deg); }
.dg-dashboard-inner { display: grid; grid-template-columns: 24% 1fr; min-height: 250px; }
.dg-sidebar { display: flex; flex-direction: column; gap: 16px; background: #edf1e8; padding: 14px 12px; border-radius: 0 0 0 9px; font-size: 8px; color: #788773; }
.dg-app-mark { font-family: "Poiret One", sans-serif; font-size: 26px; color: #294b36; margin-bottom: 2px; }
.dg-sidebar .is-chosen { color: #294b36; font-weight: 600; }
.dg-sidebar-bottom { margin-top: auto; font-size: 6px; }
.dg-dash-main { padding: 21px 16px; }
.dg-dash-main > b { display: block; font-size: 22px; font-weight: 400; margin: 5px 0 14px; }
.dg-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dg-stats > div { border: 1px solid #dee6d6; border-radius: 5px; padding: 7px 10px; }
.dg-stats strong { display: block; font-size: 20px; color: #52755f; }
.dg-stats small { display: block; font-size: 7px; color: #788773; }
.dg-table-title { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 8px; }
.dg-table-title span { color: #788773; font-size: 6px; }
.dg-task { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid #e6ebdf; font-size: 8px; }
.dg-task i { display: grid; place-items: center; width: 22px; height: 24px; font-style: normal; background: #e9efdf; border-radius: 4px; }
.dg-task small { display: block; font-size: 6px; color: #788773; margin-top: 2px; }
.dg-task em { margin-left: auto; font-size: 6px; font-style: normal; color: #788773; }
.dg-task .dg-approved { color: #426b45; }
.dg-float--access { bottom: 24px; left: 13%; }
.dg-scene--commerce { background: #e8e6d8; }
.dg-booking { position: absolute; width: 310px; top: 12px; left: calc(50% - 170px); border: 1px solid #c9ccba; border-radius: 10px; background: #fafbf5; box-shadow: 0 22px 45px #484d2825; transform: rotate(-3deg); }
.dg-booking-inner { padding: 22px 24px; }
.dg-booking-inner > b { display: block; font-family: "Poiret One", sans-serif; font-size: 32px; margin-top: 5px; }
.dg-booking-inner p { font-size: 9px; color: #788773; margin-top: 4px; }
.dg-choice-label { margin: 18px 0 8px; font-size: 8px; }
.dg-choices { display: flex; gap: 6px; }
.dg-choices span { padding: 9px; border: 1px solid #dfe5d7; border-radius: 5px; font-size: 8px; }
.dg-choices .is-chosen, .dg-dates .is-chosen { color: #315d43; border-color: #8da888; background: #e3ecd9; }
.dg-dates { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.dg-dates span { padding: 7px 3px; text-align: center; font-size: 6px; border: 1px solid #dfe5d7; border-radius: 5px; }
.dg-dates strong { display: block; font-size: 16px; margin-top: 3px; }
.dg-booking-total { display: flex; justify-content: space-between; align-items: center; margin: 17px 0 12px; font-size: 10px; }
.dg-booking-total small { display: block; font-size: 7px; color: #788773; margin-top: 4px; }
.dg-booking-total > strong { font-size: 22px; }
.dg-booking .dg-publish { display: flex; justify-content: space-between; }
.dg-float--booking { right: 5%; bottom: 12px; transform: rotate(2deg); }
.dg-scene--ai { background: #d4dfd0; }
.dg-art--ai { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 30px; }
.dg-inbox { width: 82%; padding: 19px 20px 11px; background: #fafcf6; border: 1px solid #c7d3be; border-radius: 9px; box-shadow: 0 12px 25px #2d4d2815; transform: rotate(-3deg); }
.dg-inbox > b { display: block; font-size: 15px; margin: 7px 0; font-weight: 500; }
.dg-inbox > p { font-size: 9px; line-height: 1.8; color: #6b7c6e; }
.dg-inbox-footer { display: flex; justify-content: space-between; margin-top: 12px; border-top: 1px solid #e5eadd; padding-top: 9px; font-size: 6px; color: #6b7c6e; }
.dg-inbox-footer i { font-style: normal; }
.dg-ai-connector { height: 28px; border-left: 1px dashed #78916f; }
.dg-ai-core { display: flex; align-items: center; gap: 16px; background: #294f37; width: 82%; border-radius: 11px; padding: 16px 20px; color: #ebf4e3; box-shadow: 0 6px 25px #294f3720; }
.dg-ai-core > span { font-size: 32px; color: #c0d9a9; }
.dg-ai-core b { display: block; font-weight: 400; font-size: 16px; }
.dg-ai-core small { display: block; font-size: 8px; color: #bdcfb4; margin-top: 3px; }
.dg-ai-core i { margin-left: auto; font-style: normal; font-size: 11px; }
.dg-ai-branches { display: flex; justify-content: center; gap: 8px; width: 100%; padding: 14px 0; }
.dg-ai-branches span { font-size: 7px; color: #426541; border-bottom: 1px solid #a9bca1; padding: 0 10px 9px; }
.dg-draft { display: grid; grid-template-columns: 1fr auto; width: 82%; padding: 16px 20px 0; border: 1px solid #acbd9f; border-radius: 9px; background: #f4f8ed; box-shadow: 0 10px 25px #2d4d2810; transform: rotate(2deg); }
.dg-draft b { display: block; font-size: 14px; margin: 5px 0; font-weight: 500; }
.dg-draft small { display: block; font-size: 7px; color: #6b7c6e; }
.dg-draft-icon { font-size: 24px; color: #6b8a59; }
.dg-review { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 11px 0; margin-top: 12px; border-top: 1px solid #d8e3ce; font-size: 8px; color: #52755f; }
@media (prefers-reduced-motion: no-preference) {
  .dg-ready .dg-slide.is-active .dg-float { animation: dg-arrive .7s .12s both; }
  .dg-ready .dg-slide.is-active .dg-ai-core { animation: dg-arrive .65s .12s both; }
  .dg-ready .dg-slide.is-active .dg-draft { animation: dg-arrive .7s .25s both; }
  @keyframes dg-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 1000px) {
  .dg-slide { grid-template-columns: 1fr 1fr; }
  .dg-copy { padding: 1.6rem; }
  .dg-copy .dg-lead { font-size: .95rem; }
  .dg-copy p { font-size: .8rem; }
  .dg-features { font-size: .7rem; }
  .dg-art--mobile .dg-phone { left: 5%; }
  .dg-art--mobile .dg-web-preview { right: 4%; }
  .dg-web-content { padding: 15px; }
  .dg-scene-top, .dg-scene figcaption { padding-left: 1rem; padding-right: 1rem; }
  .dg-float--access { left: 5%; right: 5%; }
  .dg-art--ai { padding: 8px 10px; }
}
@media (max-width: 760px) {
  .dg-heading { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 1.8rem; }
  .dg-heading > p { justify-self: start; max-width: 34rem; font-size: .9rem; }
  .dg-heading .digital-layout-eyebrow { font-size: .65rem; margin-bottom: 1.3rem; }
  .dg-heading h2 { font-size: clamp(2.7rem, 8vw, 3.6rem); }
  .dg-chapters { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .dg-chapters button { padding: 1rem .6rem; font-size: .75rem; border-bottom: 1px solid var(--line); }
  .dg-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dg-scene { min-height: 435px; }
  .dg-scene-top { padding-top: 1rem; font-size: .58rem; }
  .dg-art { max-width: 500px; align-self: center; height: 370px; }
  .dg-scene figcaption { padding-bottom: 1rem; font-size: .58rem; }
  .dg-phone { top: 15px; width: 165px; height: 320px; }
  .dg-phone-body { padding: 5px 10px; }
  .dg-phone-field { margin-top: 10px; }
  .dg-phone-field .dg-abstract-landscape { height: 60px; }
  .dg-art--mobile .dg-phone { left: 9%; }
  .dg-web-preview { top: 45px; }
  .dg-web-content .dg-abstract-landscape { height: 85px; }
  .dg-float--published { bottom: 11px; right: 5%; }
  .dg-dashboard { top: 24px; }
  .dg-float--access { bottom: 5px; }
  .dg-sidebar { gap: 12px; }
  .dg-dash-main { padding: 16px 12px; }
  .dg-booking { width: 275px; left: calc(50% - 147px); top: 8px; transform: rotate(-3deg) scale(.92); transform-origin: top center; }
  .dg-booking-inner { padding: 15px 20px; }
  .dg-booking-inner > b { font-size: 27px; }
  .dg-choice-label { margin-top: 12px; }
  .dg-float--booking { bottom: 2px; }
  .dg-art--ai { padding: 8px 12px; }
  .dg-inbox { padding-top: 12px; }
  .dg-ai-connector { height: 20px; }
  .dg-ai-core { padding: 11px 16px; }
  .dg-draft { padding-top: 10px; }
  .dg-copy { padding: 1.5rem 1.6rem 1.8rem; }
  .digital-layout-digital .dg-copy h3 { font-size: clamp(2.65rem, 8vw, 3.5rem); margin: 1.5rem 0 1.1rem; }
  .dg-copy .dg-lead { font-size: 1rem; }
  .dg-copy p { font-size: .87rem; }
  .dg-features { font-size: .77rem; margin-bottom: 1.5rem; }
  .dg-payoff { font-size: .86rem; }
  .dg-footer p { display: none; }
  .dg-footer { padding: .85rem 0; }
}
@media (max-width: 370px) {
  .dg-chapters button { font-size: .67rem; gap: .5rem; }
  .dg-copy { padding-inline: 1.2rem; }
  .dg-dashboard { width: 96%; left: 2%; }
  .dg-dash-main { padding-inline: 8px; }
  .dg-float { padding: 12px; }
  .dg-float b { font-size: 10px; }
  .dg-scene figcaption > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .digital-gallery *, .digital-gallery *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}