/* Websites only: an editorial introduction and a full-width studio showcase. */
.detail-main.website-main {
  width: 100%;
  max-width: none;
  padding: 140px 0 0;
}

.website-hero { width: 100%; }
.website-heading { max-width: 1440px; margin: 0 auto; padding: 12px var(--gutter) 58px; text-align: right; }
.website-heading h1 { margin: 0; color: var(--detail-text); font-size: clamp(92px, 14.7vw, 212px); font-weight: 500; line-height: .94; letter-spacing: -.075em; text-wrap: balance; }
.website-heading > p { margin: 24px 2px 0; color: var(--detail-secondary); font-size: clamp(17px, 1.55vw, 22px); line-height: 1.4; letter-spacing: -.025em; }

.website-comparison {
  position: relative;
  isolation: isolate;
  width: calc(100% - var(--gutter) * 2);
  max-width: 1340px;
  margin-inline: auto;
  aspect-ratio: 1.75;
  overflow: hidden;
  border: 1px solid #17201812;
  border-radius: 26px;
  background: #e9e5dd;
  box-shadow: 0 24px 65px -38px #26301d40;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.website-compare-after, .website-compare-before { position: absolute; inset: 0; overflow: hidden; }
.website-compare-after { z-index: 0; background: radial-gradient(ellipse at 76% 18%, #fff9e9 0, transparent 58%), radial-gradient(ellipse at 20% 92%, #c6b88a55, transparent 62%), #e4e1d7; }
.website-compare-before { z-index: 1; background: radial-gradient(ellipse at 25% 16%, #fff7f1 0, transparent 60%), linear-gradient(145deg, #e9ddd7, #d8cbc7); clip-path: inset(0 calc(100% - var(--comparison, 50%)) 0 0); }
.website-compare-screen { position: absolute; top: 50%; left: 50%; width: 82%; aspect-ratio: 1425 / 900; overflow: hidden; border: 1px solid #ffffffa3; border-radius: 12px; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 28px 45px -24px #25271f70, 0 3px 9px #25271f18; }
.website-compare-screen > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; pointer-events: none; }
.website-compare-screen::after { content: ""; position: absolute; inset: 0; border: 1px solid #1720180b; border-radius: inherit; pointer-events: none; }

.website-compare-label { position: absolute; z-index: 2; top: 22px; bottom: auto; padding: 8px 15px; border: 1px solid #ffffff26; border-radius: 999px; background: #191f1b; color: #fff; font-size: 11px; line-height: 1.3; letter-spacing: .015em; pointer-events: none; box-shadow: 0 2px 7px #17201812; }
.website-compare-label.is-before { left: 24px; }
.website-compare-label.is-after { right: 24px; }
.website-compare-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--comparison, 50%); width: 2px; background: #fffffff2; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px #17201809; }
.website-compare-handle { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffffb3; border-radius: 50%; background: #fffffff5; color: #31382f; transform: translate(-50%, -50%); box-shadow: 0 3px 12px #1a251e26; }
.website-compare-handle svg { width: 23px; height: 23px; }
.website-comparison > input[type="range"] { position: absolute; z-index: 5; inset: 0; display: block; width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.website-comparison:has(input:focus-visible) .website-compare-handle { outline: 3px solid #7f9d27; outline-offset: 5px; }
html[data-site-theme="dark"] .website-comparison { border-color: #ffffff20; box-shadow: 0 24px 65px -38px #0009; }
.website-comparison-caption { max-width: 1440px; margin: 14px auto 0; padding-inline: var(--gutter); color: var(--detail-secondary); font-size: 12px; line-height: 1.5; }
.website-statement { max-width: 1120px; margin: clamp(70px, 7.8vw, 112px) auto; padding-inline: var(--gutter); color: var(--detail-text); font-size: clamp(29px, 3.45vw, 50px); font-weight: 400; line-height: 1.2; letter-spacing: -.045em; text-align: center; text-wrap: balance; }

.website-work { width: 100%; margin: 0; padding: 16px 0 12px; scroll-margin-top: 105px; }
.website-work-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 350px); align-items: end; gap: 23px 50px; max-width: 1440px; margin: 0 auto 45px; padding-inline: var(--gutter); }
.website-work-heading h2 { max-width: 850px; margin: 0; color: var(--detail-text); font-size: clamp(42px, 5.5vw, 79px); font-weight: 500; line-height: 1.02; letter-spacing: -.06em; text-wrap: balance; }
.website-work-heading > p { max-width: 350px; margin: 0 0 3px; color: var(--detail-secondary); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.website-motion-toggle { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--detail-line); border-radius: 999px; background: transparent; color: var(--detail-secondary); font-size: 12px; line-height: 1.4; }
.website-motion-toggle:hover { border-color: #8f9e82; color: var(--detail-text); }
.website-motion-toggle:focus-visible { outline: 2px solid #7f9d27; outline-offset: 4px; }
.website-work > p, .website-work-note { max-width: 1440px; margin: 22px auto 0; padding-inline: var(--gutter); color: var(--detail-secondary); font-size: 12px; line-height: 1.6; }

/* Two equal groups make one seamless cycle. The observer opts into motion. */
.website-marquee { --website-tile-width: 500px; --website-tile-gap: 26px; width: 100%; overflow: hidden; }
.website-marquee-row { min-width: 0; width: 100%; overflow: hidden; }
.website-marquee-row + .website-marquee-row { margin-top: var(--website-tile-gap); }
.website-marquee-track { display: flex; align-items: stretch; gap: var(--website-tile-gap); width: max-content; animation: website-project-travel var(--row-duration, 50s) linear infinite; animation-play-state: paused; }
.website-marquee-group { display: flex; flex: none; align-items: stretch; gap: var(--website-tile-gap); width: max-content; margin: 0; padding: 0; list-style: none; }
.website-marquee-row.is-reverse .website-marquee-track { animation-direction: reverse; }
.website-marquee-track.is-running:not(.is-paused),
.website-marquee-row.is-running:not(.is-paused) > .website-marquee-track,
.website-marquee.is-running:not(.is-paused) .website-marquee-track { animation-play-state: running; will-change: transform; }
.website-marquee.is-paused .website-marquee-track,
.website-marquee.is-dragging .website-marquee-track,
.website-marquee-row.is-paused > .website-marquee-track,
.website-marquee-row.is-dragging > .website-marquee-track,
.website-marquee-track.is-paused,
.website-marquee-row:focus-within .website-marquee-track { animation-play-state: paused !important; }
.website-marquee-row:is(.is-keyboard, .is-manual) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #9ead8b transparent; }
.website-marquee-row:is(.is-keyboard, .is-manual) > .website-marquee-track { animation: none !important; transform: none !important; will-change: auto !important; }
.website-marquee-row:is(.is-keyboard, .is-manual) .website-marquee-group[aria-hidden="true"] { display: none; }

@keyframes website-project-travel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - var(--website-tile-gap) / 2), 0, 0); }
}

.website-logo-tile { flex: 0 0 var(--website-tile-width); width: var(--website-tile-width); aspect-ratio: 5 / 3; min-width: 0; }
.website-logo-link { position: relative; display: block; width: 100%; height: 100%; min-height: 44px; overflow: hidden; border: 1px solid #ffffff12; border-radius: 25px; background: var(--brand-base, #31483a); cursor: zoom-in; }
.website-logo-link:focus-visible { outline: 3px solid #9ebc39; outline-offset: -5px; }
.website-logo-art { position: absolute; isolation: isolate; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse at 85% 6%, color-mix(in srgb, var(--brand-light, #b0d48c) 22%, transparent), transparent 57%), radial-gradient(ellipse at 10% 94%, color-mix(in srgb, var(--brand-accent, #7b9a68) 17%, transparent), transparent 60%), linear-gradient(145deg, #0b1110, color-mix(in srgb, var(--brand-base, #31483a) 45%, #080d0c) 55%, #050908); }
.website-logo-art::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 48% 42%, transparent 20%, #02060530 100%), linear-gradient(180deg, #ffffff05, transparent 37%, #00000020); pointer-events: none; }
.website-logo-glow { position: absolute; z-index: 0; inset: -20%; border-radius: 50%; background: radial-gradient(ellipse at 27% 79%, color-mix(in srgb, var(--brand-light, #b0d48c) 34%, transparent), transparent 43%), radial-gradient(ellipse at 77% 26%, color-mix(in srgb, var(--brand-accent, #7b9a68) 23%, transparent), transparent 47%); opacity: .6; transform: rotate(-18deg); }
.website-logo-ribbon { position: absolute; z-index: 1; left: -35%; top: 8%; width: 160%; height: 175%; border: none; border-radius: 50%; background: radial-gradient(ellipse at 44% 7%, #ffffff94, color-mix(in srgb, var(--brand-light, #b0d48c) 55%, #8d9d94) 16%, color-mix(in srgb, var(--brand-accent, #7b9a68) 35%, #101a16) 35%, transparent 68%); -webkit-mask-image: radial-gradient(ellipse, transparent 60%, #000 61%, #000 63%, #000b 66%, transparent 70%); mask-image: radial-gradient(ellipse, transparent 60%, #000 61%, #000 63%, #000b 66%, transparent 70%); transform: rotate(-29deg); box-shadow: none; opacity: .65; }
.website-logo-ribbon.is-second { left: 10%; top: -29%; width: 110%; height: 115%; border: none; border-radius: 48% 52% 65% 35% / 62% 48% 52% 38%; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--brand-light, #b0d48c) 22%, transparent), transparent 62%); -webkit-mask-image: none; mask-image: none; transform: rotate(28deg); box-shadow: none; opacity: .3; }
.website-logo-glow { animation: website-logo-light 22s ease-in-out infinite alternate; animation-play-state: paused; }
.website-logo-ribbon { animation: website-logo-ribbon 29s ease-in-out infinite alternate; animation-play-state: paused; }
.website-logo-ribbon.is-second { animation-name: website-logo-ribbon-second; animation-duration: 34s; }
.website-marquee.is-running:not(.is-paused) .website-logo-tile.is-in-view :is(.website-logo-glow, .website-logo-ribbon) { animation-play-state: running; will-change: transform, opacity; }
.website-marquee:is(.is-paused, .is-dragging) :is(.website-logo-glow, .website-logo-ribbon),
.website-marquee-row:is(.is-paused, .is-dragging, .is-keyboard, .is-manual, :focus-within) :is(.website-logo-glow, .website-logo-ribbon) { animation-play-state: paused !important; }

@keyframes website-logo-light {
  from { transform: translate3d(-3%, 2%, 0) rotate(-18deg) scale(1); opacity: .45; }
  to { transform: translate3d(5%, -3%, 0) rotate(-10deg) scale(1.07); opacity: .72; }
}

@keyframes website-logo-ribbon {
  from { transform: translate3d(0, 0, 0) rotate(-29deg); opacity: .5; }
  to { transform: translate3d(3%, -3%, 0) rotate(-23deg); opacity: .78; }
}

@keyframes website-logo-ribbon-second {
  from { transform: translate3d(0, 0, 0) rotate(28deg); opacity: .18; }
  to { transform: translate3d(-3%, 3%, 0) rotate(20deg); opacity: .38; }
}

.website-project-logo { position: relative; z-index: 3; display: block; width: auto; height: auto; max-width: 64%; max-height: 47%; object-fit: contain; }
.website-logo-tile[data-project-id="piuvita"] .website-project-logo { max-width: 65%; max-height: 47%; }
.website-logo-tile[data-project-id="date"] .website-project-logo { max-width: 56%; max-height: 55%; }
.website-logo-tile[data-project-id="norte-bravo"] .website-project-logo { max-width: 62%; max-height: 47%; }
.website-logo-tile[data-project-id="venezuela-bakery"] .website-project-logo { max-width: 64%; max-height: 60%; }
.website-tile-arrow { position: absolute; z-index: 4; right: 22px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fffffff0; color: #222a20; font-size: 20px; line-height: 1; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.website-tile-name { position: absolute; z-index: 4; bottom: 31px; left: 24px; right: 80px; color: #fff; font-size: 14px; line-height: 1.3; text-shadow: 0 1px 5px #0006; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.website-logo-link:focus-visible :is(.website-tile-arrow, .website-tile-name) { opacity: 1; transform: none; }

.website-main > :is(.detail-capabilities, .detail-related) { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.website-main + .detail-contact { padding-bottom: 100px; }
.website-floating-cta { position: fixed; z-index: 35; bottom: max(26px, env(safe-area-inset-bottom)); left: 50%; display: inline-flex; align-items: center; justify-content: space-between; gap: 29px; min-height: 58px; max-width: calc(100vw - 32px); padding: 8px 9px 8px 24px; border: 1px solid #ffffff24; border-radius: 999px; background: #171e18; color: #fff; font-size: 14px; line-height: 1.35; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 8px 24px #101b1426; }
.website-floating-cta > span:last-child { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ddfb4d; color: #20271f; font-size: 21px; line-height: 1; }
.website-floating-cta:hover { background: #2b3528; }
.website-floating-cta:focus-visible { outline: 2px solid #91ab35; outline-offset: 5px; }

/* The website image viewer includes a short project brief and its live link. */
dialog.detail-lightbox.website-project-dialog { width: min(1180px, calc(100vw - 48px)); max-height: calc(100svh - 32px); padding: 64px 24px 20px; overflow-y: auto; overscroll-behavior: contain; }
.website-project-dialog > .detail-lightbox-close { position: sticky; z-index: 7; top: 0; right: auto; flex: none; align-self: flex-end; margin: -52px -8px 8px 0; background: #1f2b20; }
.website-project-dialog > figure { flex: none; }
.website-project-dialog > figure img { width: 100%; max-height: 45svh; object-fit: contain; }
.website-project-dialog > figure figcaption { margin-top: 8px; font-size: 11px; }
.website-project-meta { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: 8px 32px; padding: 20px 4px 0; color: #f2f5ec; }
.website-project-type { grid-column: 1; margin: 0; color: #afc0a8; font-size: 10px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.website-project-title { grid-column: 1; margin: 0; color: #f2f5ec; font-size: 32px; font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
.website-project-description { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: #c1cabc; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.website-project-meta > .detail-primary { grid-column: 2; justify-self: start; min-height: 44px; margin-top: 4px; padding: 10px 18px; background: #ddfb4d; color: #20271f; font-size: 13px; }
.website-project-dialog > .detail-lightbox-controls { flex: none; margin-top: 17px; }

@media (hover: hover) and (pointer: fine) {
  .website-marquee-row:hover .website-marquee-track { animation-play-state: paused !important; }
  .website-marquee-row:hover :is(.website-logo-glow, .website-logo-ribbon) { animation-play-state: paused !important; }
  .website-logo-link:hover :is(.website-tile-arrow, .website-tile-name) { opacity: 1; transform: none; }
}

@media (max-width: 1050px) {
  .detail-main.website-main { padding-top: 125px; }
  .website-heading { padding-bottom: 45px; }
  .website-work-heading { grid-template-columns: minmax(0, 1fr) minmax(210px, 285px); gap: 22px 35px; }
  .website-work-heading > p { font-size: 15px; }
  .website-marquee { --website-tile-width: 400px; --website-tile-gap: 22px; }
}

@media (max-width: 767px) {
  .detail-main.website-main { padding-top: 100px; }
  .website-heading { padding-top: 14px; padding-bottom: 38px; }
  .website-heading h1 { font-size: clamp(72px, 15.4vw, 118px); }
  .website-heading > p { margin-top: 18px; font-size: 17px; }
  .website-comparison { aspect-ratio: 1.4; border-radius: 22px; }
  .website-compare-screen { width: 88%; border-radius: 10px; }
  .website-compare-handle { width: 42px; height: 42px; }
  .website-comparison-caption { font-size: 11px; }
  .website-statement { margin-block: 74px; font-size: clamp(29px, 4.6vw, 36px); }
  .website-work-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 32px; }
  .website-work-heading h2 { max-width: 590px; font-size: clamp(43px, 7.3vw, 56px); }
  .website-work-heading > p { max-width: 450px; margin-bottom: 0; }
  .website-motion-toggle { grid-column: 1; justify-self: start; }
  .website-work { scroll-margin-top: 85px; }
}

@media (max-width: 600px) {
  .website-heading h1 { font-size: clamp(66px, 15.5vw, 93px); letter-spacing: -.07em; }
  .website-heading > p { font-size: 16px; }
  .website-comparison { width: calc(100% - 28px); aspect-ratio: 1.16; border-radius: 20px; }
  .website-compare-screen { top: 53%; width: calc(100% - 30px); border-radius: 8px; box-shadow: 0 20px 28px -16px #25271f70, 0 2px 5px #25271f18; }
  .website-compare-label { top: 14px; bottom: auto; padding: 7px 12px; font-size: 10px; }
  .website-compare-label.is-before { left: 14px; }
  .website-compare-label.is-after { right: 14px; }
  .website-compare-handle { width: 38px; height: 38px; }
  .website-compare-handle svg { width: 21px; height: 21px; }
  .website-statement { margin-block: 66px; font-size: 29px; line-height: 1.22; }
  .website-work-heading h2 { font-size: clamp(41px, 10.5vw, 57px); }
  .website-work-heading > p { font-size: 14px; }
  .website-marquee { --website-tile-width: 280px; --website-tile-gap: 16px; }
  .website-logo-link { border-radius: 25px; }
  .website-project-logo { max-width: 62%; max-height: 46%; }
  .website-tile-arrow { right: 14px; bottom: 13px; width: 36px; height: 36px; font-size: 18px; }
  .website-tile-name { bottom: 24px; left: 17px; right: 60px; font-size: 11px; }
  .website-floating-cta { bottom: max(18px, env(safe-area-inset-bottom)); gap: 23px; min-height: 56px; padding-left: 21px; font-size: 13px; }
  dialog.detail-lightbox.website-project-dialog { width: calc(100vw - 16px); max-height: calc(100svh - 16px); padding: 62px 14px 16px; }
  .website-project-dialog > .detail-lightbox-close { margin-right: 0; }
  .website-project-dialog > figure img { max-height: min(45svh, 330px); }
  .website-project-meta { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 17px 3px 0; }
  .website-project-type { grid-column: 1; font-size: 9px; }
  .website-project-title { grid-column: 1; font-size: 27px; }
  .website-project-description { grid-column: 1; grid-row: auto; margin-top: 3px; font-size: 13px; line-height: 1.5; }
  .website-project-meta > .detail-primary { grid-column: 1; margin-top: 7px; }
  .website-project-dialog > .detail-lightbox-controls { gap: 18px; margin-top: 15px; }
}

@media (pointer: coarse) {
  .website-marquee-row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .website-marquee-row::-webkit-scrollbar { display: none; }
  .website-marquee-row:active .website-marquee-track { animation-play-state: paused !important; }
  .website-marquee-row:active :is(.website-logo-glow, .website-logo-ribbon) { animation-play-state: paused !important; }
  .website-tile-arrow, .website-tile-name { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .website-marquee-row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #9ead8b transparent; }
  .website-marquee-track { animation: none !important; transform: none !important; will-change: auto !important; }
  .website-logo-glow, .website-logo-ribbon { animation: none !important; will-change: auto !important; }
  .website-marquee-group[aria-hidden="true"] { display: none; }
  .website-tile-arrow, .website-tile-name { opacity: 1; transform: none; transition: none; }
  .website-motion-toggle { display: none; }
}